/* stage2.css v1.1 — свойства выбранного слоя и клавиатурный фокус.
   Первая версия: две колонки «библиотека | холст», строки элементов, тулбар, призрак
   перетаскивания. Все правила прибиты к #s2, классы с префиксом s2-, чтобы не задеть
   style.css студии и ped.css (там свои input/button на всю ширину). */

#s2{
  --s2-line:#e6e9ee; --s2-ink:#1c1c1c; --s2-ink2:#8a8a8a; --s2-acc:#2563eb;
  --s2-soft:#f7f8fa;
  display:grid; grid-template-columns:320px minmax(0,1fr) 252px; gap:16px;
  align-items:stretch; height:76vh; min-height:540px;
  font:13px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:var(--s2-ink);
}
#s2 *{box-sizing:border-box}
@media(max-width:980px){
  #s2{grid-template-columns:1fr; height:auto}
  #s2 .s2-ctrl{max-height:none}
  #s2 .s2-lib{max-height:280px}
  #s2 .s2-stage{height:70vh; min-height:460px}
}

/* ---------------------------- левая колонка ---------------------------- */
#s2 .s2-lib{display:flex; flex-direction:column; min-height:0;
  border:1px solid var(--s2-line); border-radius:8px; overflow:hidden; background:#fff}
#s2 .s2-libhead{flex:0 0 auto; padding:9px 11px; border-bottom:1px solid var(--s2-line);
  background:var(--s2-soft)}
#s2 .s2-libhead b{display:block; font-size:12.5px; font-weight:600; margin-bottom:6px}
#s2 input#s2_find{width:100%; padding:5px 8px; border:1px solid #dcdcdc; border-radius:5px;
  font:12.5px inherit; background:#fff}
#s2 #s2_els{flex:1 1 auto; overflow:auto; min-height:0; padding:5px}
#s2 .s2-el{display:flex; align-items:center; gap:8px; padding:5px 6px; border-radius:6px;
  cursor:grab; user-select:none; border:1px solid transparent}
#s2 .s2-el:hover{background:#f2f6fd; border-color:#dbe6fb}
#s2 .s2-el:active{cursor:grabbing}
#s2 .s2-mini{width:38px; height:26px; object-fit:contain; flex:0 0 auto;
  background:#fff; border:1px solid var(--s2-line); border-radius:4px}
#s2 .s2-elt{min-width:0; flex:1 1 auto; line-height:1.3}
#s2 .s2-elt b{display:block; font-size:12.5px; font-weight:600;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#s2 .s2-elt span{display:block; font-size:11px; color:var(--s2-ink2);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
#s2 .s2-kind{flex:0 0 auto; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:1px 7px; border-radius:999px; background:#f1f1f1; color:#5a5a5a}
#s2 .s2-kind.k-tsarga{background:#f6ead8; color:#8a5a1c}
#s2 .s2-kind.k-impost{background:#efe2cf; color:#7a4f1c}
#s2 .s2-kind.k-glass{background:#e2eef6; color:#1d5f86}
#s2 .s2-kind.k-panel{background:#f0ebe0; color:#6b5b38}
#s2 .s2-empty{padding:14px 10px; font-size:12px; color:var(--s2-ink2)}

/* ---------------------------- правая колонка ---------------------------- */
#s2 .s2-stage{display:flex; flex-direction:column; min-width:0; min-height:0;
  border:1px solid var(--s2-line); border-radius:8px; overflow:hidden; background:#fff}
/* панель управления — правая колонка: кнопки столбиком, ниже — размеры */
#s2 .s2-ctrl{display:flex; flex-direction:column; min-height:0; overflow:auto;
  border:1px solid var(--s2-line); border-radius:8px; background:#fff}
#s2 #s2_bar{flex:0 0 auto; display:flex; gap:6px; flex-direction:column;
  align-items:stretch; padding:10px; border-bottom:1px solid var(--s2-line);
  background:var(--s2-soft)}
#s2 #s2_bar .s2-btn{text-align:left}
#s2 #s2_sizes{flex:0 0 auto; padding:10px}
#s2 .s2-sgrp{margin-bottom:10px}
#s2 .s2-sgrp b{display:block; font-size:12px; font-weight:600; margin-bottom:6px;
  color:var(--s2-ink)}
#s2 .s2-schips{display:flex; flex-wrap:wrap; gap:5px}
#s2 .s2-chip{font:12px inherit; border:1px solid #dcdcdc; background:#fff;
  color:var(--s2-ink); border-radius:6px; padding:4px 8px; cursor:pointer;
  width:auto; margin:0}
#s2 .s2-chip:hover{background:#f1f4f8}
#s2 .s2-chip.on{background:var(--s2-acc); border-color:var(--s2-acc); color:#fff}
#s2 .s2-chip:disabled{opacity:.35; cursor:not-allowed; background:#f3f4f6}
#s2 .s2-btn{font:12.5px inherit; border:1px solid #dcdcdc; background:#fff; color:var(--s2-ink);
  border-radius:6px; padding:5px 10px; cursor:pointer; width:auto; margin:0;
  text-transform:none; letter-spacing:normal}
#s2 .s2-btn:hover{background:#f1f4f8}
#s2 .s2-size{flex:0 0 auto; display:flex; gap:6px; align-items:center;
  padding:8px 10px; border-bottom:1px solid var(--s2-line); font-size:12px; color:var(--s2-ink2)}
#s2 .s2-size input[type=number]{width:82px; padding:4px 7px; border:1px solid #dcdcdc;
  border-radius:5px; font:12.5px inherit; text-align:right; background:#fff}
#s2 #s2_cwrap{position:relative; flex:1 1 auto; min-height:260px; overflow:hidden; background:#f7f8fa}
#s2 #s2_canvas{position:absolute; inset:0; display:block; width:100%; height:100%;
  border:0; border-radius:0; touch-action:none}
#s2 #s2_note{flex:0 0 auto; padding:7px 12px; border-top:1px solid var(--s2-line);
  background:#fff; font-size:12px; color:var(--s2-ink2); line-height:1.5}
#s2 #s2_note b{color:var(--s2-ink); font-weight:600}
#s2 .s2-warn{color:#b06a2e; font-weight:600}

/* ------------------- призрак перетаскивания (в body) -------------------- */
.s2-ghost{position:fixed; z-index:400; pointer-events:none; display:flex; align-items:center;
  gap:7px; padding:4px 9px 4px 5px; background:#fff; border:1px solid #c9d4e6; border-radius:7px;
  box-shadow:0 8px 22px rgba(20,30,50,.22); opacity:.95;
  font:12.5px/1.2 -apple-system,"Segoe UI",Roboto,Arial,sans-serif; color:#1c1c1c;
  max-width:240px; white-space:nowrap}
.s2-ghost img{width:34px; height:24px; object-fit:contain; background:#fff;
  border:1px solid #e6e9ee; border-radius:4px}
.s2-ghost span{overflow:hidden; text-overflow:ellipsis}

/* значок «не в масштабе»: подробности — в подсказке при наведении */
.noscale-ic { display:inline-flex; align-items:center; justify-content:center;
  width:18px; height:18px; margin-top:4px; border-radius:50%;
  background:#e8483c; color:#fff; font:700 12px/1 system-ui, sans-serif;
  cursor:help; user-select:none; }

/* миниатюра сохранённой модели в списке: видно, что именно сохранено */
img.m-prev{display:block; width:64px; height:auto; max-height:150px; object-fit:contain;
  border:1px solid #e6e9ee; border-radius:5px; background:#fff}

/* плитка сохранённых моделей — карточки как в магазине */
#m_rows.m-grid, #b_rows.m-grid{display:flex; flex-wrap:wrap; gap:14px; padding:6px 0}
.m-card{width:190px; border:1px solid #e6e9ee; border-radius:10px; background:#fff;
  padding:12px 10px 10px; display:flex; flex-direction:column; align-items:center;
  gap:7px; box-shadow:0 1px 3px rgba(20,30,50,.05)}
.m-card img.m-prev{width:160px; height:200px; object-fit:contain; background:#f7f8fa;
  border:1px solid #eef1f5; border-radius:6px}
.m-card .m-name{font-weight:600; font-size:13.5px; text-align:center; color:#1c1c1c;
  max-width:170px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.m-card .m-sub{font-size:11.5px; color:#8a8a8a}
.m-card .m-btns{display:flex; gap:6px; margin-top:2px}
.m-card .m-btns button{width:auto; padding:4px 12px}
.m-empty{padding:10px; color:#94a3b8; font-size:13px}

/* кнопка создания по чертежу — главная, зелёная */
#s2 .s2-btn.s2-go{background:#16a34a; border-color:#15803d; color:#fff; font-weight:600}
#s2 .s2-btn.s2-go:hover{background:#15913f}
/* базовый размер 2000/800 — светло-зелёный фон */
#s2 .s2-chip.bs{background:#e8f6ea; border-color:#bfe3c6}
#s2 .s2-chip.bs:hover{background:#dcf0df}
#s2 .s2-chip.on{background:var(--s2-acc); border-color:var(--s2-acc); color:#fff}

/* сохранить модель — тёмная, в самом низу столбца кнопок */
#s2 .s2-btn.s2-save{background:#0f172a; border-color:#0f172a; color:#fff;
  font-weight:600; text-align:center; margin-top:4px}
#s2 .s2-btn.s2-save:hover{background:#1e293b}

.m-card .m-btns{flex-wrap:wrap; justify-content:center}
.m-card .m-btns button{padding:4px 8px; font-size:12px}




/* ПЛИТКА МОДЕЛЕЙ: 6 в строке, превью на всю ширину карточки */
#m_rows.m-grid, #b_rows.m-grid{display:grid; gap:10px; padding:6px 0;
  grid-template-columns:repeat(6, minmax(0, 1fr))}
@media (max-width:1280px){#m_rows.m-grid, #b_rows.m-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:980px){#m_rows.m-grid, #b_rows.m-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:700px){#m_rows.m-grid, #b_rows.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.m-card{width:auto; padding:8px 6px 6px; gap:5px}
.m-card img.m-prev{width:100%; height:auto; aspect-ratio:4/5; max-height:none;
  object-fit:contain}
.m-card .m-name{max-width:100%; font-size:14px}

/* кнопки-пиктограммы */
.m-card .m-btns{gap:8px}
.m-card .m-btns button.m-ico{width:34px; height:34px; padding:0; display:flex;
  align-items:center; justify-content:center; border:1px solid #d7dce4;
  border-radius:8px; background:#fff; color:#334155; cursor:pointer}
.m-card .m-btns button.m-ico:hover{background:#f1f5f9; border-color:#94a3b8}
.m-card .m-btns button.m-del:hover{background:#fee2e2; border-color:#fca5a5;
  color:#b91c1c}

/* модальное окно чертежа */
#m_modal{position:fixed; inset:0; background:rgba(15,23,42,.62); z-index:9999;
  display:none; align-items:center; justify-content:center; padding:24px}
#m_modal .m-modal-box{background:#fff; border-radius:12px; max-width:min(1100px,94vw);
  max-height:92vh; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 18px 48px rgba(15,23,42,.35)}
#m_modal .m-modal-top{display:flex; align-items:center; justify-content:space-between;
  gap:16px; padding:10px 14px; border-bottom:1px solid #e6e9ee}
#m_modal .m-modal-title{font:600 14px system-ui; color:#0f172a}
#m_modal .m-modal-x{width:30px; height:30px; border:1px solid #d7dce4;
  border-radius:8px; background:#fff; font-size:18px; line-height:1; color:#475569;
  cursor:pointer}
#m_modal .m-modal-x:hover{background:#f1f5f9}
#m_modal .m-modal-body{overflow:auto; padding:10px; background:#f8fafc}
#m_modal .m-modal-body img{display:block; max-width:100%; height:auto; margin:0 auto;
  background:#fff}


/* ЭТАП 3 — СБОРКА БЛОКА */
.b-tabs{display:flex; flex-direction:column; gap:6px; margin:0;
  align-content:start}
.b-tabs .b-tab{text-align:left}
.b-tab{padding:7px 12px; border:1px solid #d7dce4; border-radius:8px; background:#fff;
  font:13px system-ui; color:#334155; cursor:pointer}
.b-tab:hover{background:#f1f5f9}
.b-tab.on{background:#2563eb; border-color:#2563eb; color:#fff}
.b-tab.soon{color:#94a3b8; border-style:dashed}
.b-wrap{display:grid; grid-template-columns:230px minmax(0,1fr) 320px;
  gap:16px; align-items:start;
  align-items:start}
@media (max-width:1100px){.b-wrap{grid-template-columns:minmax(0,1fr)}
  .b-tabs{flex-direction:row; flex-wrap:wrap}}
.b-left canvas{width:100%; height:auto; background:#f7f8fa; border:1px solid #e6e9ee;
  border-radius:10px}
.b-stat{margin:8px 0 10px; font:12.5px system-ui; color:#64748b}
.b-right{border:1px solid #e6e9ee; border-radius:10px; padding:12px; background:#fff}
.b-right label{display:block; margin:8px 0 3px; font:12px system-ui; color:#475569}
.b-right select,.b-right input{width:100%; padding:6px 8px; border:1px solid #cbd5e1;
  border-radius:7px; font:13px system-ui; background:#fff; color:#0f172a}
.b-row{display:grid; grid-template-columns:1fr 1fr; gap:8px}
.b-note{margin:12px 0 2px; font:600 12px system-ui; color:#0f172a}
.b-right button.go{width:100%; margin-top:12px; padding:9px 12px; border-radius:8px;
  background:#0f172a; border:1px solid #0f172a; color:#fff; font:600 13px system-ui;
  cursor:pointer}
.b-right button.go:hover{background:#1e293b}
.b-kpi{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px;
  margin-bottom:12px}
@media (max-width:900px){.b-kpi{grid-template-columns:repeat(2,minmax(0,1fr))}}
.b-kpi>div{border:1px solid #e6e9ee; border-radius:9px; padding:8px 10px; background:#fff}
.b-kpi span{display:block; font:11.5px system-ui; color:#8a8a8a}
.b-kpi b{display:block; font:600 15px system-ui; color:#0f172a; margin-top:2px}
.b-kpi i{display:block; font:normal 11px system-ui; color:#94a3b8; font-style:normal}
table.b-spec{width:100%; border-collapse:collapse; font:13px system-ui}
table.b-spec th{text-align:left; padding:7px 8px; background:#f8fafc; color:#475569;
  border-bottom:1px solid #e6e9ee; font-weight:600; font-size:12px}
table.b-spec td{padding:7px 8px; border-bottom:1px solid #f1f5f9; color:#1c1c1c}
table.b-spec tr:hover td{background:#f8fafc}
.b-empty{padding:10px; color:#94a3b8; font:13px system-ui}


/* подзакладки видов блока */
.b-views{display:flex; gap:6px; margin-bottom:10px}
.b-view{padding:6px 14px; border:1px solid #d7dce4; border-radius:8px; background:#fff;
  font:13px system-ui; color:#334155; cursor:pointer}
.b-view:hover{background:#f1f5f9}
.b-view.on{background:#0f172a; border-color:#0f172a; color:#fff}

/* чипы размеров на этапе 3 (панель блока) — вид как на этапе 2 */
#b_sizes{--s2-acc:#2563eb; margin:10px 0 12px}
#b_sizes .s2-sgrp{margin-bottom:10px}
#b_sizes .s2-sgrp b{display:block; font-size:12px; font-weight:600;
  margin-bottom:6px}
#b_sizes .s2-schips{display:flex; flex-wrap:wrap; gap:5px}
#b_sizes .s2-chip{font:12px inherit; border:1px solid #dcdcdc;
  background:#fff; border-radius:8px; padding:5px 9px; cursor:pointer}
#b_sizes .s2-chip:hover{background:#f1f4f8}
#b_sizes .s2-chip.on{background:var(--s2-acc); border-color:var(--s2-acc);
  color:#fff}
#b_sizes .s2-chip:disabled{opacity:.35; cursor:not-allowed;
  background:#f3f4f6}

/* раздел «Фурнитура» — плитка только для чтения */
/* ФУРНИТУРА: строки с миниатюрой в начале, группы = комплекты */
#hw_grid{padding:4px 0}
#hw_grid table.hw-tbl{width:100%; border-collapse:collapse}
#hw_grid tr.hw-row{cursor:pointer}
#hw_grid tr.hw-row td{padding:5px 10px; vertical-align:middle; font-size:13px; border-bottom:1px solid #f0f2f5}
#hw_grid tr.hw-row:hover td{background:#f8fafc}
#hw_grid tr.hw-row.sel td{background:#eff6ff}
#hw_grid td.hw-pic{width:88px}
#hw_grid img.hw-prev{display:block; width:76px; height:54px; object-fit:contain; border-radius:6px;
  background:#f7f8fa; border:1px solid #eef1f5}
#hw_grid td.hw-name .nm{font-weight:600; color:#1c1c1c}
#hw_grid td.hw-name .dim{font-size:11.5px}
#hw_grid td.hw-dim, #hw_grid td.hw-mat{color:#475569; white-space:nowrap}
#hw_grid td.hw-mat{text-align:right}
#hw_grid td.hw-srcs{white-space:nowrap; width:1%}
#hw_grid img.hw-srcimg{display:inline-block; height:46px; width:auto; max-width:80px; object-fit:cover;
  border:1px solid #e6e9ee; border-radius:4px; background:#fff; margin-left:4px; cursor:zoom-in; vertical-align:middle}
#e_3d_img{width:100%; height:auto; border:1px solid #e6e9ee; border-radius:8px; background:#f7f8fa; display:block}
#s2_props{flex-basis:100%;padding:8px 0;border-top:1px solid #e2e8f0;margin-top:8px}
#s2_props label{display:block;margin:6px 0;font-size:12px;color:#475569}
#s2_props input{display:block;width:100%;box-sizing:border-box;margin-top:4px;padding:6px;border:1px solid #cbd5e1;border-radius:6px}
#s2 button:focus-visible,#s2 input:focus-visible{outline:2px solid #2563eb;outline-offset:2px}