/* nova.lab — конструктор принта, прототип 05.10.2026.
   Отдельный файл: style.css живого сайта не трогаем до «да» владельца.
   Цвета и шрифты берём из переменных style.css, чтобы прототип выглядел как сайт. */

.k-body { margin: 0; background: #11100e; color: #f4f1ea; font-family: 'Manrope', system-ui, sans-serif; }

.k-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 14px 20px; border-bottom: 1px solid rgba(244, 241, 234, .12);
}
.k-logo { color: #f4f1ea; text-decoration: none; font-family: 'Unbounded', sans-serif; font-weight: 700; letter-spacing: .02em; }
.k-badge { font-family: 'JetBrains Mono', monospace; font-size: 11px; color: #c9c3b6; text-transform: uppercase; letter-spacing: .08em; }

.k-main { max-width: 1120px; margin: 0 auto; padding: 24px 16px 64px; display: grid; gap: 28px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .k-main { grid-template-columns: 1fr 420px; align-items: start; } }

/* ——— футболка с превью ——— */
/* style.css сайта даёт любому section отступ 64px сверху и снизу — здесь он лишний */
.k-stage, .k-panel { padding: 0; }
.k-stage { display: grid; gap: 10px; justify-items: center; }
.k-shirt { position: relative; width: 100%; max-width: 520px; }
.k-shirt-svg { display: block; width: 100%; height: auto; }
.k-shirt-photo { display: block; width: 100%; height: auto; border-radius: 16px; }
.k-shirt-svg [data-shirt-body] { fill: #1d1b18; stroke: rgba(244,241,234,.18); stroke-width: 2; }
.k-shirt.is-white .k-shirt-svg [data-shirt-body] { fill: #efece4; stroke: rgba(17,16,14,.18); }
.k-shirt-svg [data-shirt-neck] { fill: #000; }
.k-shirt.is-white .k-shirt-svg [data-shirt-neck] { fill: #b9b3a6; }
.k-preview {
  position: absolute; left: 50%; top: 38%; transform: translate(-50%, -50%);
  width: 46%; height: auto;
}
.k-hint { margin: 0; min-height: 20px; font-size: 13px; color: #d8b36a; text-align: center; }

/* ——— панель ——— */
.k-panel { background: #17161300; display: grid; gap: 14px; }
.k-row { display: grid; gap: 6px; }
.k-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #c9c3b6; }
.k-input {
  width: 100%; box-sizing: border-box; padding: 12px 14px; border-radius: 12px;
  border: 1px solid rgba(244,241,234,.18); background: #1b1917; color: #f4f1ea;
  font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 20px; letter-spacing: .04em; text-transform: uppercase;
}
.k-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.k-chips .chip {
  appearance: none; cursor: pointer; padding: 8px 12px; border-radius: 999px;
  border: 1px solid rgba(244,241,234,.22); background: transparent; color: #f4f1ea;
  font-family: 'Manrope', sans-serif; font-size: 13px;
}
.k-chips .chip[aria-pressed="true"] { background: #e07b39; border-color: #e07b39; color: #11100e; font-weight: 700; }
.k-tip { margin: 0; font-size: 13px; line-height: 1.5; color: #c9c3b6; }

/* ——— ячейки букв ——— */
.k-cells { display: flex; flex-wrap: wrap; gap: 10px; }
.k-cell {
  position: relative; width: 84px; height: 104px; border-radius: 14px; cursor: pointer;
  border: 1px dashed rgba(244,241,234,.3); background: #1b1917;
  display: grid; place-items: center; padding: 0; color: #f4f1ea;
}
.k-cell.is-filled { border-style: solid; border-color: rgba(244,241,234,.5); }
.k-cell.is-drop { border-color: #e07b39; background: #241e18; }
.k-cell canvas { max-width: 76px; max-height: 76px; }
.k-cell-ch { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 30px; opacity: .5; }
.k-cell-plus { position: absolute; bottom: 6px; right: 10px; font-size: 18px; color: #e07b39; }
.k-cell-n { position: absolute; top: 6px; left: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: #8d877c; }
.k-count { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: #c9c3b6; }

.k-warn { margin: 0; padding: 12px 14px 12px 30px; border-radius: 12px; background: #2a2016; color: #f0c88a; font-size: 13px; line-height: 1.5; }

.k-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* кнопки одинаковые и в панели, и в окне редактора (иначе «ghost» в окне остаётся белой системной) */
.k-main .btn, .k-modal-box .btn {
  appearance: none; cursor: pointer; padding: 12px 18px; border-radius: 12px;
  border: 1px solid rgba(244,241,234,.22); background: transparent; color: #f4f1ea;
  font-family: 'Manrope', sans-serif; font-size: 14px; font-weight: 600;
}
.k-main .btn-primary, .k-modal-box .btn-primary { background: #e07b39; border-color: #e07b39; color: #11100e; }
.k-main .btn-ghost, .k-modal-box .btn-ghost { color: #c9c3b6; }
.k-note { margin: 0; min-height: 18px; font-size: 13px; color: #9fd8a0; }

/* ——— редактор буквы ——— */
.k-modal { position: fixed; inset: 0; background: rgba(8,8,7,.86); display: grid; place-items: center; padding: 16px; z-index: 50; }
.k-modal[hidden] { display: none; }
.k-modal-box { width: min(560px, 100%); background: #171613; border: 1px solid rgba(244,241,234,.16); border-radius: 18px; padding: 16px; display: grid; gap: 12px; }
.k-modal-head { display: flex; align-items: center; justify-content: space-between; font-family: 'Unbounded', sans-serif; }
.k-x { appearance: none; border: 0; background: transparent; color: #f4f1ea; font-size: 26px; line-height: 1; cursor: pointer; }
.k-editor-stage { display: grid; place-items: center; background: #0e0d0c; border-radius: 14px; padding: 10px; }
.k-editor-stage canvas { max-width: 100%; height: auto; touch-action: none; cursor: grab; }
.k-editor-tools { display: grid; gap: 10px; }
.k-zoom { display: grid; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: #c9c3b6; }
.k-zoom input { width: 100%; }

/* доп. надпись (ответ Ярослава 05.10: надписи сверху / снизу / сбоку) */
.k-input-sm { font-family: 'Manrope', sans-serif; font-size: 15px; font-weight: 600; letter-spacing: 0; text-transform: none; }
.k-preview { max-width: 96%; }

/* редактор буквы, вторая редакция 05.10 (по разбору экрана конкурента):
   фото видно целиком, буква — светлое окно; ползунки для точной подгонки; переход между буквами */
.k-modal-head { gap: 8px; }
.k-modal-head b { flex: 1; text-align: center; font-size: 15px; }
.k-nav {
  appearance: none; cursor: pointer; width: 34px; height: 34px; border-radius: 10px;
  border: 1px solid rgba(244,241,234,.22); background: transparent; color: #f4f1ea; font-size: 20px; line-height: 1;
}
.k-nav:disabled { opacity: .3; cursor: default; }
.k-center { text-align: center; }
.k-sliders { display: grid; gap: 10px; }
.k-sliders label {
  display: grid; gap: 4px;
  font-family: 'JetBrains Mono', monospace; font-size: 10px; text-transform: uppercase; letter-spacing: .08em; color: #c9c3b6;
}
.k-sliders input { width: 100%; accent-color: #e07b39; }
.k-thumbs { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.k-thumb {
  appearance: none; cursor: pointer; width: 46px; height: 56px; border-radius: 10px; padding: 0;
  border: 1px solid rgba(244,241,234,.22); background: #1b1917; color: #f4f1ea;
  display: grid; place-items: center;
}
.k-thumb[aria-pressed="true"] { border-color: #e07b39; }
.k-thumb canvas { max-width: 40px; max-height: 44px; }
.k-thumb-ch { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 16px; opacity: .45; }

/* окно редактора должно помещаться на телефоне целиком, вместе с кнопкой «Готово» */
.k-modal-box { max-height: 92vh; overflow-y: auto; }
.k-editor-stage canvas { max-height: 44vh; }

/* ——— планшет и узкий экран: футболка не должна занимать весь первый экран ——— */
@media (max-width: 899px) {
  .k-stage { align-items: start; }
  .k-shirt { position: relative; width: 100%; height: 52vh; overflow: hidden; border-radius: 16px; }
  .k-shirt-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 14%; border-radius: 16px; }
  .k-preview { max-width: none; }
}

/* ======================= телефон (05.10) =======================
   На узком экране футболка занимала весь первый экран, и до кнопок надо было листать.
   Делаем: снимок невысокий и обрезан по груди, панель сразу под ним, редактор — на весь экран. */
@media (max-width: 640px) {
  .k-head { padding: 10px 14px; }
  .k-badge { font-size: 9px; text-align: right; }
  .k-main { padding: 14px 14px 90px; gap: 18px; }

  /* снимок ровно нужной высоты: картинку кладём абсолютно, иначе сетка резервирует
     место под её полный размер и между футболкой и панелью зияет пустота */
  .k-stage { align-items: start; }
  .k-shirt { position: relative; width: 100%; height: 40vh; overflow: hidden; border-radius: 16px; }
  .k-shirt-photo { position: absolute; inset: 0; height: 100%; width: 100%; object-fit: cover; object-position: 50% 12%; border-radius: 16px; }
  .k-preview { max-width: none; }

  .k-input, .k-input-sm { font-size: 16px; }          /* меньше 16px — iOS сам приближает страницу */
  .k-chips .chip { padding: 10px 14px; font-size: 14px; }

  /* ячейки букв — лентой, крупнее под палец */
  .k-cells { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }
  .k-cell { flex: 0 0 auto; width: 92px; height: 112px; touch-action: pan-y; }
  .k-cell canvas { max-width: 82px; max-height: 82px; }

  /* липкую полосу кнопок не делаем: она накрывала поля ввода выше */
  .k-actions { gap: 8px; }
  .k-actions .btn { flex: 1 1 100%; padding: 13px 16px; font-size: 15px; }
  .k-main .btn-ghost, .k-modal-box .btn-ghost { font-size: 14px; padding: 11px 16px; }

  /* редактор буквы — лист на весь экран */
  .k-modal { padding: 0; }
  .k-modal-box {
    width: 100%; max-height: 100vh; height: 100vh; border-radius: 0; border: 0;
    padding: 12px 14px calc(14px + env(safe-area-inset-bottom));
    grid-template-rows: auto 1fr auto auto auto auto auto;
  }
  .k-editor-stage canvas { max-height: 32vh; }
  .k-modal-box { gap: 8px; }
  .k-modal-box .k-tip { display: none; }          /* на телефоне подсказка уже была на главном экране */
  .k-modal-box .btn { padding: 13px 18px; font-size: 15px; }
  .k-modal-box .btn-ghost { font-size: 13px; padding: 10px 14px; }
  /* «Готово» всегда на виду, даже если содержимое окна пришлось прокрутить */
  .k-modal-box > .btn-primary { position: sticky; bottom: 0; z-index: 2; box-shadow: 0 -10px 18px #171613; }
  .k-sliders { gap: 6px; }
  .k-sliders label { font-size: 9px; }
  .k-thumb { width: 48px; height: 56px; }
  .k-thumb canvas { max-width: 36px; max-height: 40px; }
}

/* кнопка «поближе» на футболке и окно сравнения цветов (05.10) */
.k-zoom-btn {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  appearance: none; cursor: pointer; padding: 7px 12px; border-radius: 999px;
  border: 1px solid rgba(244,241,234,.3); background: rgba(17,16,14,.72); color: #f4f1ea;
  font-family: 'Manrope', sans-serif; font-size: 12px;
}
.k-shirt.is-white .k-zoom-btn { background: rgba(17,16,14,.58); }
.k-big-box { width: min(900px, 100%); }
.k-big-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.k-big-item {
  appearance: none; cursor: pointer; padding: 0; border: 1px solid transparent; border-radius: 14px;
  background: transparent; color: #f4f1ea; display: grid; gap: 6px; justify-items: center;
}
.k-big-item.is-now { border-color: #e07b39; }
.k-big-shirt { position: relative; display: block; width: 100%; }
.k-big-shirt img { display: block; width: 100%; height: auto; border-radius: 12px; }
.k-big-label { font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #c9c3b6; padding-bottom: 8px; }

/* ======================= встраивание в светлый квиз =======================
   Прототип живёт на тёмной странице (body.k-body), а квиз — светлый.
   Здесь перекрашиваем только то, что иначе было бы серым по белому. */
body:not(.k-body) .k-root { color: #1b1a18; display: grid; gap: 16px; }
body:not(.k-body) .k-root .k-label,
body:not(.k-body) .k-root .k-tip,
body:not(.k-body) .k-root .k-count,
body:not(.k-body) .k-root .k-big-label { color: #6c675e; }
body:not(.k-body) .k-root .k-input,
body:not(.k-body) .k-root .k-input-sm { background: #fff; color: #1b1a18; border-color: rgba(27,26,24,.18); }
body:not(.k-body) .k-root .chip { border-color: rgba(27,26,24,.2); color: #1b1a18; }
body:not(.k-body) .k-root .chip[aria-pressed="true"] { background: #e07b39; border-color: #e07b39; color: #fff; }
body:not(.k-body) .k-root .k-cell { background: #fff; border-color: rgba(27,26,24,.22); }
body:not(.k-body) .k-root .k-cell-ch { color: #1b1a18; }
body:not(.k-body) .k-root .k-cell-n { color: #9a948a; }
body:not(.k-body) .k-root .k-warn { background: #fdf3e2; color: #7a551c; }
body:not(.k-body) .k-root .btn { color: #1b1a18; border-color: rgba(27,26,24,.22); }
body:not(.k-body) .k-root .btn-primary { background: #e07b39; border-color: #e07b39; color: #fff; }
body:not(.k-body) .k-root .btn-ghost { color: #6c675e; }
body:not(.k-body) .k-root .k-modal-box { background: #fff; color: #1b1a18; border-color: rgba(27,26,24,.12); }
body:not(.k-body) .k-root .k-modal-box .k-x,
body:not(.k-body) .k-root .k-nav { color: #1b1a18; border-color: rgba(27,26,24,.2); }
body:not(.k-body) .k-root .k-editor-stage { background: #f2efe9; }
body:not(.k-body) .k-root .k-thumb { background: #fff; border-color: rgba(27,26,24,.2); }
body:not(.k-body) .k-root .k-thumb-ch { color: #1b1a18; }
body:not(.k-body) .k-root .k-modal-box > .btn-primary { box-shadow: 0 -10px 18px #fff; }
body:not(.k-body) .k-root .k-shirt { max-width: 520px; margin: 0 auto; }
body:not(.k-body) .k-root .k-note { color: #2f7a3a; }