/* v3 — галочки видимости деталей в комплектации; компактные выпадающие списки комплектующих. */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#fff;color:#1c1c1c;font:14px/1.5 -apple-system,"Segoe UI",Roboto,Arial,sans-serif;padding:22px 18px 60px}
.wrap{max-width:1180px;margin:0 auto}
a{color:#1c1c1c}
h1{font-size:22px;font-weight:600;margin-bottom:4px}
.sub{color:#8a8a8a;font-size:12px;margin-bottom:18px}
.tabs{display:flex;gap:26px;border-bottom:1px solid #ececec;margin-bottom:20px}
.tab{appearance:none;background:none;border:0;padding:11px 0;font:14px/1 inherit;color:#9a9a9a;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-1px}
.tab.on{color:#1c1c1c;border-bottom-color:#1c1c1c}
.cols{display:grid;grid-template-columns:340px minmax(0,1fr);gap:26px;align-items:start}
@media(max-width:860px){.cols{grid-template-columns:1fr}}
.card{border:1px solid #ececec;border-radius:8px;padding:14px 16px;margin-bottom:14px}
label{display:block;font-size:12px;color:#8a8a8a;margin:10px 0 3px}
input[type=text],input[type=number],select{width:100%;padding:8px 10px;border:1px solid #dcdcdc;border-radius:5px;font:14px inherit;background:#fff}
input[type=file]{font:12px inherit;width:100%}
button.go{width:100%;margin-top:14px;padding:11px;background:#1c1c1c;color:#fff;border:0;border-radius:5px;font:500 13px/1 inherit;letter-spacing:.05em;text-transform:uppercase;cursor:pointer}
button.go:disabled{background:#c8c8c8;cursor:default}
button.go.sec{background:#fff;color:#1c1c1c;border:1px solid #dcdcdc}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.stage{display:flex;justify-content:center;background:#fafafa;border:1px solid #ececec;border-radius:8px;padding:14px;min-height:340px}
.stage canvas{max-height:600px;max-width:100%;height:auto;width:auto}
.sws{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.sw{width:34px;height:34px;border:1px solid #dedede;border-radius:4px;cursor:pointer;padding:0}
.sw.on{box-shadow:0 0 0 2px #1c1c1c;border-color:#1c1c1c}
.note{font-size:12px;color:#8a8a8a;margin-top:8px;line-height:1.6}
.ok{color:#1a7f37}.warn{color:#b06a2e}.err{color:#c33}
table{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
td,th{padding:7px 6px;border-bottom:1px solid #f0f0f0;text-align:left}
th{color:#8a8a8a;font-weight:500;font-size:11px;text-transform:uppercase;letter-spacing:.05em}
.price{font-size:26px;font-weight:700;font-variant-numeric:tabular-nums}
.pill{display:inline-block;font-size:11px;color:#6a6a6a;background:#f4f4f4;border-radius:99px;padding:2px 9px;margin-right:5px}
code{font:11px ui-monospace,Consolas,monospace;background:#f5f5f5;padding:2px 5px;border-radius:3px;word-break:break-all}
.mono{font:11px ui-monospace,Consolas,monospace;color:#9a9a9a;word-break:break-all;margin-top:8px}
.stage img{max-height:620px;max-width:100%;height:auto;display:block}
.mtabs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 8px}
.mtab{appearance:none;border:1px solid #e0e0e0;background:#fff;color:#6a6a6a;font:11px inherit;
  padding:5px 10px;border-radius:99px;cursor:pointer}
.mtab.on{background:#1c1c1c;color:#fff;border-color:#1c1c1c}
.sws{max-height:260px;overflow:auto}
.name{font-size:13px;font-weight:600;margin-bottom:6px}
select{width:100%;padding:8px 10px;border:1px solid #dcdcdc;border-radius:5px;font:14px inherit;background:#fff}
.wrap.wide{max-width:1500px}
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,520px);gap:24px;align-items:start}
@media(max-width:1100px){.split{grid-template-columns:1fr}}
table.els{width:100%;border-collapse:collapse;font-size:13px}
table.els th{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:#8a8a8a;text-align:left;
  border-bottom:1px solid #e6e6e6;padding:6px}
table.els td{border-bottom:1px solid #f2f2f2;padding:7px 6px;vertical-align:middle;cursor:pointer}
table.els tr:hover td{background:#fafafa}
.dim{color:#9a9a9a;font-size:11px}
img.mini{height:34px;background:#fff;border:1px solid #eee;border-radius:3px;display:block}
img.prof{width:100%;border:1px solid #eee;border-radius:5px;background:#fff}
.fr{display:flex;align-items:center;gap:7px;margin:6px 0;font-size:12px;color:#8a8a8a}
.fr .pos{width:80px;padding:5px 7px;border:1px solid #dcdcdc;border-radius:4px}
.fr .el{flex:1;padding:5px 7px}
.fr .rm{color:#c33;text-decoration:none;font-size:16px}
.tag{background:#f1f1f1;border-radius:99px;padding:2px 9px;color:#5a5a5a;white-space:nowrap}
.cells{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.cell{border:1px solid #dcdcdc;background:#fff;border-radius:4px;padding:5px 9px;font-size:11px;cursor:pointer}
.cell.glass{background:#dbe9f2;border-color:#7fb0d0;color:#24506b}
.gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.gal.big{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.gal figure{margin:0;text-align:center}
.gal img{width:100%;border:1px solid #eee;border-radius:5px;background:#fafafa}
.gal figcaption{font-size:11px;color:#8a8a8a;margin-top:5px;line-height:1.35}

.toolbar{display:flex;align-items:center;gap:14px;margin-bottom:10px}
.toolbar .go{width:auto;margin:0;padding:9px 16px}
table.els td input,table.els td select{width:100%;padding:5px 7px;border:1px solid #e0e0e0;border-radius:4px;
  font:12px inherit;background:#fff}
table.els td .nm{margin-bottom:4px;font-weight:600}
.drow{display:flex;align-items:center;gap:8px}
.drow .fl{font-size:11px;border:0;padding:0}
.wd{display:flex;align-items:center;gap:4px;margin-top:4px;font-size:11px;color:#9a9a9a}
.wd input{width:64px !important}
.nodraw{font-size:11px;color:#c33;white-space:nowrap}
.mini-btn{border:1px solid #1c1c1c;background:#1c1c1c;color:#fff;border-radius:4px;padding:5px 10px;
  font:11px inherit;cursor:pointer}
.mini-btn:disabled{background:#bbb;border-color:#bbb}
table.els td .dl,table.els td .cn{font-size:11px;color:#c33;text-decoration:none;margin-left:6px}
img.prof{background:#fff}

table.els tr.editing td{background:#fbfbfb}
table.els td a{font-size:11px;text-decoration:none;margin-right:8px;color:#1c6fb4}
table.els td a.dl,table.els td a.cn{color:#c33}

img.mini{width:132px;height:40px;object-fit:contain;background:#fff;border:1px solid #ececec;
  border-radius:3px;display:block}
.drow{display:flex;align-items:center;gap:8px}
.drow .fl{max-width:120px}
td.act{white-space:nowrap}
.ico{width:28px;height:28px;border:1px solid #dcdcdc;background:#fff;border-radius:5px;cursor:pointer;
  font-size:14px;line-height:1;color:#5a5a5a;margin-right:5px;padding:0}
.ico:hover{border-color:#1c1c1c;color:#1c1c1c}
.ico.dl:hover,.ico.cn:hover{border-color:#c33;color:#c33}
.mini-btn{margin-right:5px}

.modal{position:fixed;inset:0;background:rgba(20,20,24,.72);display:flex;align-items:center;
  justify-content:center;z-index:99;padding:30px}
.mbox{background:#fff;border-radius:8px;padding:16px;max-width:94vw;max-height:92vh;position:relative;
  overflow:auto}
.mbox img{max-width:88vw;max-height:78vh;display:block}
.mclose{position:absolute;top:6px;right:10px;border:0;background:none;font-size:26px;cursor:pointer;
  color:#8a8a8a;line-height:1}
.mcap{font-size:12px;color:#8a8a8a;margin-top:8px}
img.mini.orig{cursor:zoom-in;margin-top:4px}

.mbox.wide2{max-width:1240px;width:96vw}
.pedcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;margin:8px 0}
#ped_img{max-width:100%;border:1px solid #eee;border-radius:5px}
#ped_cv{border:1px solid #ddd;border-radius:5px;width:100%;height:auto;cursor:crosshair;touch-action:none}

/* полоса разбора чертежа — под своей строкой таблицы элементов */
tr.s1prog td { padding: 6px 10px 10px; background: #fcfcfc; }
.s1pb { height: 4px; background: #eee; border-radius: 3px; overflow: hidden; }
.s1pb i { display: block; height: 100%; width: 0; border-radius: 3px;
  background: linear-gradient(90deg, #ffb054, #f37e20); transition: width .4s ease; }
.s1pt { display: block; margin-top: 5px; font-size: 12px; color: #555; }
.s1pt b { color: #161616; }
tr.s1prog.ok .s1pb i { background: #2f9e44; }
tr.s1prog.err .s1pb i { background: #d43a2f; width: 100% !important; }
tr.s1prog.err .s1pt b { color: #b3271e; }

/* --- группы библиотеки элементов, перетаскивание, выделение --- */
table.els tr.grp td { background:#f4f4f4; border-bottom:1px solid #e6e6e6; padding:6px 8px;
  font-size:11px; text-transform:uppercase; letter-spacing:.06em; color:#4a4a4a; font-weight:600;
  cursor:pointer; user-select:none; }
table.els tr.grp .car { display:inline-block; width:12px; color:#8a8a8a; }
table.els tr.grp .cnt { color:#9a9a9a; font-weight:400; margin-left:4px; }
table.els tr.grp.off td { color:#8a8a8a; }
table.els tr.el.sel td { background:#ececec; }
table.els tr.el.sel:hover td { background:#e7e7e7; }
table.els tr.el.drag td { opacity:.45; }
.grip { display:inline-block; color:#c2c2c2; cursor:grab; margin-right:6px; font-size:13px; letter-spacing:-2px; }
table.els tr.el:hover .grip { color:#8a8a8a; }
img.mini.zoom { cursor:zoom-in; }

/* чертёж не в масштабе — сечение построено по размерам */
.noscale { color:#c0392b; font-size:11px; line-height:1.35; margin-top:5px; font-weight:600; }
table.els td .noscale { max-width:220px; font-weight:500; }

/* Этап 3: карточки используют существующие preview API; кнопки доступны с клавиатуры. */
#b_form .b-card-group{min-width:0;border:0;padding:0;margin:12px 0}
#b_form .b-card-group legend{padding:0;margin-bottom:5px;font:12px system-ui;color:#475569}
#b_form .b-card-picker{position:relative}
#b_form .b-card-picker[open]{z-index:20}
#b_form .b-card-summary{display:flex;align-items:center;gap:8px;min-height:46px;padding:5px 8px;border:1px solid #cbd5e1;border-radius:7px;cursor:pointer;list-style:none}
#b_form .b-card-summary::-webkit-details-marker{display:none}
#b_form .b-card-summary:hover,#b_form .b-card-picker[open] .b-card-summary{border-color:#2563eb;background:#f8fafc}
#b_form .b-card-value{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
#b_form .b-card-summary .b-card-media{width:32px;height:34px;flex-shrink:0}
#b_form .b-card-summary .b-card-caption{margin:0;font-size:12px;text-align:left}
#b_form .b-card-summary .b-card-placeholder{max-width:100%;font-size:8px;padding:1px;overflow-wrap:anywhere}
#b_form .b-card-arrow{color:#64748b}
#b_form .b-card-picker[open] .b-card-arrow{transform:rotate(180deg)}
#b_form .b-card-grid{position:absolute;top:100%;left:0;width:100%;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;max-height:min(380px,70vh);overflow-y:auto;overscroll-behavior:contain;padding:8px;border:1px solid #cbd5e1;border-radius:8px;background:#fff;box-shadow:0 8px 24px #0f172a26}
#b_form .b-card-picker:not([open]) .b-card-grid{display:none}
#b_form .b-card{display:flex;flex-direction:column;align-items:stretch;min-width:0;padding:5px;border:1px solid #d7dce4;border-radius:7px;background:#fff;color:#334155;cursor:pointer;text-align:center}
#b_form .b-card:hover{border-color:#94a3b8;background:#f8fafc}
#b_form .b-card.on{border-color:#2563eb;background:#eff6ff;box-shadow:inset 0 0 0 1px #2563eb}
#b_form .b-card:focus-visible,#b_form .b-card-summary:focus-visible,#b_leaf_count button:focus-visible{outline:2px solid #2563eb;outline-offset:2px}
#b_form .b-card-media{display:flex;align-items:center;justify-content:center;height:76px;min-width:0;background:#f8fafc;border-radius:4px}
#b_form .b-card-media img{width:100%;height:100%;object-fit:contain}
#b_form .b-card-caption{display:block;margin-top:5px;font:11px/1.3 system-ui;overflow-wrap:anywhere}
#b_form .b-card-placeholder{padding:4px;font:11px/1.3 system-ui;color:#64748b}
#b_form .b-card-group [hidden],#b_ext_field[hidden]{display:none}
#b_leaf_count{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:8px}
#b_leaf_count button{text-align:center}
.b-spec input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#2563eb}
.b-spec input[type=checkbox]:disabled{cursor:default}
.b-spec tr[data-hidden="true"]{color:#64748b;background:#f8fafc}