* { box-sizing: border-box; }
body { margin: 0; font: 14px/1.4 "Segoe UI", Arial, sans-serif; color: #23221f;
       background: #eceae4; height: 100vh; display: flex; flex-direction: column; }

header { display: flex; align-items: center; gap: 12px; padding: 10px 16px;
         background: #171512; color: #f3efe6; }
header .brand { font-weight: 600; letter-spacing: .02em; margin-right: 6px; }
header select, header button { font: inherit; }
header label.inline { color: #cfc8ba; display: flex; align-items: center; gap: 6px; }
.dirty { color: #e8b64c; }
header .me { flex-shrink: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis;
             white-space: nowrap; }
.status { color: #b9b2a4; font-size: 13px; max-width: 44vw; overflow: hidden;
          text-overflow: ellipsis; white-space: nowrap; }
.spacer { flex: 1; }
button { border: 1px solid rgba(255,255,255,.25); background: rgba(255,255,255,.08);
         color: inherit; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
button:hover { background: rgba(255,255,255,.16); }
button:disabled { opacity: .5; cursor: default; }
button.primary { background: #c6a15b; border-color: #c6a15b; color: #1c1710; font-weight: 600; }
button.primary:hover { background: #d4af6e; }
button.ghost { background: transparent; }

main { flex: 1; display: flex; min-height: 0; }
#left { width: 400px; min-width: 340px; overflow-y: auto; background: #f7f5f0;
        border-right: 1px solid #ddd8cc; padding: 14px; }
#left section { margin-bottom: 18px; }
#left h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
           color: #8a8272; margin: 0 0 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips button { border: 1px solid #d8d2c6; background: #fff; color: #23221f;
                border-radius: 999px; padding: 5px 12px; max-width: 100%;
                overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chips button.on { background: #171512; color: #f3efe6; border-color: #171512; }
.chips button.dup { border-style: dashed; background: transparent; color: #6f6959; }
.chips button.dup:hover { background: #efece4; }

.layers { display: flex; flex-direction: column; gap: 4px; }
.layer { display: flex; align-items: center; gap: 8px; padding: 6px 8px;
         border: 1px solid #e3ded3; background: #fff; border-radius: 8px; cursor: pointer; }
.layer.on { border-color: #c6a15b; box-shadow: 0 0 0 2px rgba(198,161,91,.22); }
.layer .name { flex: 1; }
.layer .eye { border: none; background: none; cursor: pointer; font-size: 15px;
              padding: 2px 4px; color: #6f6959; }
.layer .eye.off { opacity: .35; }

.props label { display: block; margin: 0 0 10px; color: #55503f; }
.props label.cb { display: flex; align-items: center; gap: 8px; color: #23221f; }
.props input[type=text], .props input[type=number], .props textarea, .props select {
  width: 100%; margin-top: 4px; font: inherit; padding: 6px 8px;
  border: 1px solid #d8d2c6; border-radius: 8px; background: #fff; color: #23221f; }
.props textarea { min-height: 56px; resize: vertical; }
.props input[type=range] { width: 100%; margin-top: 6px; }
.props input[type=file] { margin-top: 6px; }
.props .hint, .hint { color: #8a8272; font-size: 12.5px; margin: 2px 0 10px; }
.props img.phprev { max-width: 100%; border-radius: 8px; border: 1px solid #d8d2c6; }

.palette .row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.palette .row .plabel { flex: 1; color: #55503f; }
.palette input[type=color] { width: 46px; height: 30px; border: 1px solid #d8d2c6;
                             border-radius: 6px; background: #fff; padding: 2px; }

#right { flex: 1; min-width: 0; display: flex; flex-direction: column;
         padding: 14px; overflow-y: auto; }
.toolbar { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; color: #55503f; }
.seg { display: inline-flex; border: 1px solid #d8d2c6; border-radius: 999px; overflow: hidden; }
.seg button { border: none; background: #fff; color: #55503f; border-radius: 0; padding: 6px 14px; }
.seg button:hover { background: #f1eee7; }
.seg button.on { background: #171512; color: #f3efe6; }

.grid { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.cell { background: #fff; border: 1px solid #ddd8cc; border-radius: 10px; padding: 10px; }
.cell-head { display: flex; justify-content: space-between; align-items: center;
             gap: 8px; margin-bottom: 8px; font-size: 12.5px; color: #6f6959; }
.cell-head .acts { display: flex; gap: 6px; }
.cell-head .acts button { padding: 2px 8px; font-size: 12px; border-radius: 6px;
                          border: 1px solid #d8d2c6; background: #fff; color: #55503f; }
.frame { position: relative; background: #f2efe8; border: 1px solid #e6e1d6;
         border-radius: 6px; overflow: hidden; }
.frame iframe, .frame img { display: block; width: 100%; height: 100%; border: 0;
                            object-fit: contain; background: #fff; }
.nofile { position: absolute; inset: 0; display: flex; align-items: center;
          justify-content: center; color: #7c828c; font-size: 64px; line-height: 1.35;
          text-align: center; padding: 60px; }


/* ===== Редактор: полотно, табы форматов, панели ===== */
#left { width: 320px; min-width: 230px; flex: 0 0 auto; }
#side { width: 300px; min-width: 230px; flex: 0 0 auto; overflow-y: auto; background: #f7f5f0;
        border-left: 1px solid #ddd8cc; padding: 14px; }
#side section { margin-bottom: 18px; }
#side h2 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em;
           color: #8a8272; margin: 0 0 8px; }
#center { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: 14px; }
.split { flex: 0 0 7px; cursor: col-resize; position: relative; }
.split::after { content: ""; position: absolute; top: 10px; bottom: 10px; left: 2px; width: 3px;
                border-radius: 3px; background: #ddd8cc; }
.split:hover::after, .split.drag::after { background: #c6a15b; }
.panel-closed { display: none !important; }
.panel-btn { border: 1px solid #d8d2c6; background: #fff; color: #55503f; }
.panel-btn:hover { background: #f1eee7; }
.panel-btn.off { opacity: .55; }
.tabbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.tabbar .tab { border: 1px solid #d8d2c6; background: #fff; color: #55503f; border-radius: 999px;
               padding: 5px 13px; font: inherit; font-size: 12.5px; cursor: pointer; }
.tabbar .tab.on { background: #171512; color: #f3efe6; border-color: #171512; }
.stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center;
         gap: 8px; padding: 18px; overflow: auto; background: #f2efe8;
         border: 1px solid #e6e1d6; border-radius: 12px; }
.stage .frame { flex: 0 0 auto; background: #fff; border: 1px solid #e6e1d6; border-radius: 6px;
                box-shadow: 0 12px 34px rgba(40, 34, 20, .16); overflow: hidden; }
.frame-inner { position: relative; overflow: hidden; transform-origin: 0 0; }
.frame-inner iframe, .frame-inner img { width: 100%; height: 100%; border: 0; display: block;
                                         background: #fff; }
.zoombadge { color: #8a8272; font-size: 12.5px; }
.view-hidden { display: none !important; }
/* --- блоки кадра: правки прямо в рабочем экране (blocks.js) --- */
body:not(.mode-set) .bs-set { display: none !important; }
body.mode-set #conceptMeta > *:not(.bs-set),
body.mode-set #layers > *:not(.bs-set),
body.mode-set #props > *:not(.bs-set),
body.mode-set #stage > *:not(.bs-set),
body.mode-set #grid > *:not(.bs-set),
body.mode-set #tabbar > *:not(.bs-set) { display: none !important; }

.bs-open {
  background: #2b2d36; color: #fff; border: 1px solid #2b2d36;
  border-radius: 8px; padding: 7px 13px; font-size: 13px; cursor: pointer;
}
.bs-status { font-size: 12.5px; color: #6b7280; }
.bs-status.err { color: #b91c1c; }
.bs-field { display: block; margin-bottom: 9px; font-size: 12px; color: #6b7280; }
.bs-field > span { display: block; margin-bottom: 4px; }
.bs-field select, .bs-num, .bs-area {
  width: 100%; box-sizing: border-box; padding: 6px 8px; border: 1px solid #d0d4da;
  border-radius: 8px; font-size: 13px; color: #2b2d36; background: #fff; font-family: inherit;
}
.bs-area { resize: vertical; min-height: 52px; }
.bs-mini {
  background: #fff; border: 1px solid #d0d4da; border-radius: 8px;
  padding: 6px 10px; font-size: 12.5px; cursor: pointer; margin: 4px 0; color: #2b2d36;
}
.bs-mini:hover { background: #f4f6f9; }
/* кнопки в ряду не липнут друг к другу и к подписи (было: зазор 0, активная чёрная кнопка наезжала на соседнюю) */
.bs-align .bs-mini { margin: 4px 6px 4px 0; }
.bs-align .bs-mini:last-child { margin-right: 0; }
.bs-align .bs-lbl { margin-right: 6px; }
.bs-list { margin-top: 4px; }
.bs-row { padding: 7px 9px; border-radius: 8px; cursor: pointer; font-size: 13px; color: #2b2d36; }
.bs-row:hover { background: #f2f4f7; }
.bs-row.sel { background: #e7eefc; box-shadow: inset 0 0 0 1px #b9cdf5; }
.bs-title { font-weight: 600; margin: 4px 0 10px; color: #2b2d36; }
.bs-hr { border: 0; border-top: 1px solid #e3e6ea; margin: 10px 0; }
.bs-note { font-size: 12px; color: #6b7280; line-height: 1.45; margin-top: 6px; }
.bs-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.bs-tab {
  padding: 5px 11px; border-radius: 999px; border: 1px solid #d0d4da;
  background: #fff; cursor: pointer; font-size: 12.5px; color: #2b2d36;
}
.bs-tab.on { background: #2b2d36; color: #fff; border-color: #2b2d36; }
.bs-stage { display: flex; align-items: flex-start; justify-content: center; padding: 8px; }
.bs-frame { position: relative; background: #fff; box-shadow: 0 8px 26px rgba(20,24,35,.16); }
.bs-img { display: block; width: 100%; height: 100%; }
.bs-layer { position: absolute; inset: 0; }
.bs-box { position: absolute; box-sizing: border-box; border: 1.5px solid rgba(46,110,245,.8); cursor: move; }
.bs-box:hover { border-color: #2e6ef5; }
.bs-box.sel { border-color: #f59e0b; box-shadow: 0 0 0 1px rgba(245,158,11,.4); }
.bs-fill { position: absolute; left: 0; top: 0; transform-origin: 0 0; background-repeat: no-repeat; pointer-events: none; }
.bs-tag {
  position: absolute; left: 0; top: -19px; font-size: 11px; color: #fff;
  background: rgba(43,45,54,.86); padding: 1px 6px; border-radius: 5px; white-space: nowrap;
}
.bs-grip { position: absolute; width: 11px; height: 11px; background: #fff; border: 1.5px solid #2e6ef5; border-radius: 3px; }
.bs-box.sel .bs-grip { border-color: #f59e0b; }
.bs-box .g-nw { left: -5px; top: -5px; cursor: nwse-resize; }
.bs-box .g-n { left: 50%; top: -5px; margin-left: -5px; cursor: ns-resize; }
.bs-box .g-ne { right: -5px; top: -5px; cursor: nesw-resize; }
.bs-box .g-e { right: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.bs-box .g-se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.bs-box .g-s { left: 50%; bottom: -5px; margin-left: -5px; cursor: ns-resize; }
.bs-box .g-sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.bs-box .g-w { left: -5px; top: 50%; margin-top: -5px; cursor: ew-resize; }
.bs-gallery { padding: 14px; overflow: auto; }
.bs-gtitle { font-size: 12.5px; color: #6b7280; margin-bottom: 10px; }
.bs-gcells { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; }
.bs-gcell { background: #fff; border: 1px solid #dfe3e8; border-radius: 10px; padding: 8px; cursor: pointer; }
.bs-gcell.on { border-color: #2b2d36; box-shadow: 0 0 0 1px #2b2d36; }
.bs-gcell:hover { border-color: #98a2b3; }
.bs-gimg { display: block; width: 100%; height: auto; border-radius: 6px; background: #f2f4f7; }
.bs-glabel { font-size: 12px; color: #2b2d36; margin-top: 6px; text-align: center; }
.bs-open.on { background: #f59e0b; border-color: #f59e0b; }
.bs-stage { display: block; overflow: auto; }
.bs-inner { width: max-content; margin: 0 auto; padding: 46px 20px 20px; }
.bs-zoombar { display: inline-flex; align-items: center; gap: 6px; }
.bs-zoombar .bs-mini { margin: 0; padding: 4px 9px; }
.bs-zoomval { font-size: 12.5px; color: #2b2d36; min-width: 76px; text-align: center; }
.bs-hidden { display: none !important; }
.bs-export { display: flex; align-items: center; gap: 6px; }
.bs-export select {
  padding: 6px 8px; border: 1px solid #d0d4da; border-radius: 8px; font-size: 12.5px;
  color: #2b2d36; background: #fff;
}

/* --- слой «Тень»: градиентные полосы кадра (blocks.js) --- */
.bs-gchips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 4px; }
.bs-gchips .bs-mini { margin: 0; }
.bs-align .bs-mini.on { background: #2b2d36; color: #fff; border-color: #2b2d36; }
/* инструмент «Тень (градиент)»: видно, что включено и применено */
.bs-grad .bs-mini.on { background: #2b2d36; color: #fff; border-color: #2b2d36; }
.bs-grad .bs-mini.off { opacity: .55; }
.bs-grad .bs-axisnote { margin: 2px 0 6px; }
.bs-swatch { width: 26px; height: 26px; border-radius: 50%; border: 2px solid #d0d4da;
             padding: 0; margin: 4px 4px 4px 0; cursor: pointer; }
.bs-swatch.on { border-color: #f59e0b; box-shadow: 0 0 0 2px rgba(245,158,11,.35); }
.bs-gline { position: absolute; z-index: 6; }
.bs-gline.h { left: 0; right: 0; height: 14px; margin-top: -7px; cursor: ns-resize; }
.bs-gline.h::before { content: ""; position: absolute; left: 0; right: 0; top: 6px;
                      border-top: 2px dashed #e2492f; }
.bs-gline.v { top: 0; bottom: 0; width: 14px; margin-left: -7px; cursor: ew-resize; }
.bs-gline.v::before { content: ""; position: absolute; top: 0; bottom: 0; left: 6px;
                      border-left: 2px dashed #e2492f; }
.bs-gtag { position: absolute; background: #e2492f; color: #fff; font-size: 11px;
           padding: 1px 6px; border-radius: 5px; white-space: nowrap; pointer-events: none; }
.bs-gline.h .bs-gtag { left: 50%; top: -18px; transform: translateX(-50%); }
.bs-gline.v .bs-gtag { top: 8px; left: 16px; }
.bs-gh { position: absolute; width: 10px; height: 10px; background: #fff;
         border: 1.5px solid #e2492f; border-radius: 3px; }
.bs-gline.h .bs-gh { top: 2px; }
.bs-gline.h .gha { left: 2px; }
.bs-gline.h .ghb { right: 2px; }
.bs-gline.v .bs-gh { left: 2px; }
.bs-gline.v .gha { top: 2px; }
.bs-gline.v .ghb { bottom: 2px; }

/* --- секции и строки-слайдеры в стиле Zero Block --- */
.bs-sechead { display: flex; align-items: center; gap: 6px; padding: 2px 0 8px;
              font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase;
              color: #6b7280; cursor: pointer; }
.bs-sechead .bs-chev { font-size: 10px; color: #9aa1ab; }
.bs-trow { display: flex; align-items: center; gap: 8px; margin: 7px 0; }
.bs-trow .bs-tl { flex: 0 0 84px; font-size: 11.5px; color: #6b7280; }
.bs-trow input[type=range].bs-trng { -webkit-appearance: none; appearance: none; flex: 1 1 auto;
              min-width: 36px; height: 18px; background: transparent; cursor: pointer; }
.bs-trow input[type=range].bs-trng::-webkit-slider-runnable-track { height: 2px; background: #cdd2d9; border-radius: 2px; }
.bs-trow input[type=range].bs-trng::-webkit-slider-thumb { -webkit-appearance: none; width: 13px; height: 13px;
              border-radius: 50%; background: #2b2d36; margin-top: -5.5px; }
.bs-tval { flex: 0 0 52px; width: 52px; text-align: right; font-size: 12px; color: #2b2d36;
           border: 1px solid #d6dae0; border-radius: 6px; padding: 2px 5px; box-sizing: border-box; }
.bs-sws { display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
.bs-sws .bs-swatch { width: 22px; height: 22px; margin: 0; }
.bs-gadd { width: 100%; margin-top: 8px; padding: 8px 0; border: none; border-radius: 8px;
           background: #2b2d36; color: #fff; font-size: 11px; letter-spacing: .08em;
           text-transform: uppercase; cursor: pointer; }
.bs-gadd:disabled { opacity: .4; cursor: default; }
.bs-gdel { color: #c0392b; }
.bs-gsides { margin: 8px 0; }
.bs-gsides-l { font-size: 11.5px; color: #6b7280; margin-bottom: 4px; }
.bs-gsides-b { display: flex; gap: 6px; }
.bs-gsides-b .bs-mini { flex: 1 1 0; text-align: center; margin: 0; }

/* --- выбор фона: окно библиотеки --- */
.bs-modal { position: fixed; inset: 0; background: rgba(20, 18, 16, .45); z-index: 50;
            display: flex; align-items: center; justify-content: center; }
.bs-modal-win { background: #fff; border-radius: 12px; width: min(760px, 92vw); height: min(760px, 86vh);
                max-height: 86vh; overflow-y: auto; overflow-x: hidden;
                display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; }
.bs-modal-head { display: flex; align-items: center; justify-content: space-between;
                 font-weight: 600; font-size: 13px; color: #2b2d36;
                 position: sticky; top: 0; z-index: 3; background: #fff; padding: 2px 0 8px; }
.bs-modal-sel { padding: 6px 8px; border: 1px solid #d0d4da; border-radius: 8px; font-size: 12.5px; }
.bs-modal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(126px, 1fr));
                 gap: 8px; overflow: auto; align-content: start; }
.bs-modal-cell { padding: 0; border: 1px solid #e3e6ea; border-radius: 8px; background: #fafafa;
                 cursor: pointer; aspect-ratio: 1 / 1; overflow: hidden; }
.bs-modal-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bs-modal-cell:hover { border-color: #f59e0b; }
.bs-modal-cell.logo { outline: 2px solid #f59e0b; outline-offset: -2px; }
.bs-scan-row { display: flex; gap: 8px; align-items: center; }
.bs-scan-row .bs-modal-sel { flex: 1 1 auto; }
.bs-scan-row .bs-gadd { width: 168px; margin-top: 0; }
.bs-logo-box { margin: 4px 0 2px; }

/* --- цвет элемента в панелях проекта: палитра, пипетка, свой оттенок --- */
.bs-color { margin: 6px 0 4px; }
input.bs-ccode { width: 84px; padding: 3px 6px; font-size: 12px; color: #4a4436; background: #fff;
  border: 1px solid #d8d2c6; border-radius: 6px; }
input.bs-ccode:focus { border-color: #b0641f; outline: none; }
.phex { width: 86px; padding: 4px 6px; font: inherit; font-size: 12.5px; border: 1px solid #d8d2c6;
  border-radius: 6px; background: #fff; color: #23221f; }
.pdrop { font-size: 11px; padding: 3px 8px; border: 1px solid #d8d2c6; border-radius: 6px;
  background: #fff; color: #55503f; cursor: pointer; }
.pdrop:hover { background: #f1eee7; }
.bs-ctop { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.bs-cchip { width: 34px; height: 20px; border-radius: 5px; border: 2px solid #d0d4da;
            display: inline-block; box-sizing: border-box; }
.bs-cchip.auto { background: repeating-linear-gradient(45deg, #eef0f3 0 4px, #fafbfc 4px 8px); }
.bs-ccode { font-size: 12px; color: #6b7280; font-variant-numeric: tabular-nums; }
.bs-swrow { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 2px 0 6px; }
.bs-swrow .bs-swatch { margin: 0; }
.bs-swatch.bs-auto { width: auto; height: 22px; padding: 0 7px; border-radius: 6px;
                     border-width: 1px; font-size: 10.5px; color: #6b7280; background: #fff; }
.bs-ctools { display: flex; align-items: center; gap: 6px; }
.bs-ctools .bs-mini { margin: 0; }
.bs-cinput { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

/* --- форма кнопки: закруглённая / прямая --- */
.bs-shape { margin: 8px 0 4px; }
.bs-shape .bs-lab { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.bs-seg2 { display: flex; gap: 6px; }
.bs-seg2 .bs-shapeb { flex: 1 1 0; padding: 6px 8px; font-size: 12px; border: 1px solid #d0d4da;
                      background: #fff; border-radius: 7px; cursor: pointer; color: #374151; }
.bs-seg2 .bs-shapeb:hover { border-color: #b9bfc7; }
.bs-seg2 .bs-shapeb.on { border-color: #f0b429; background: #fff7e6; color: #8a5a00; font-weight: 600; }

/* --- блоки кадра проекта: рамки, перетаскивание, галочки --- */
.bs-fboxes { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.bs-fbox { position: absolute; border: 1.5px dashed rgba(61, 120, 255, .9); border-radius: 4px;
           pointer-events: auto; cursor: move; touch-action: none; }
.bs-fbox.on { border-style: solid; border-color: #2f6bff; box-shadow: 0 0 0 1px rgba(47, 107, 255, .3); }
.bs-fbox-tag { position: absolute; top: -17px; left: -1px; height: 15px; padding: 1px 6px;
               font-size: 10px; line-height: 13px; color: #fff; background: rgba(61, 120, 255, .92);
               border-radius: 3px; white-space: nowrap; }
.bs-fbox.on .bs-fbox-tag { background: #2f6bff; }
.bs-vcheck { margin: 0 7px 0 0; flex: 0 0 auto; }
.bs-fresize { position: absolute; right: -7px; bottom: -7px; width: 13px; height: 13px;
              background: #fff; border: 2px solid #2f6bff; border-radius: 3px;
              cursor: nwse-resize; display: none; touch-action: none; }
.bs-fw { position: absolute; right: -7px; top: 50%; margin-top: -6px; width: 13px; height: 13px;
         background: #fff; border: 2px solid #2f6bff; border-radius: 3px;
         cursor: ew-resize; display: none; touch-action: none; }
.bs-fh { position: absolute; bottom: -7px; left: 50%; margin-left: -6px; width: 13px; height: 13px;
         background: #fff; border: 2px solid #2f6bff; border-radius: 3px;
         cursor: ns-resize; display: none; touch-action: none; }
.bs-fbox:hover .bs-fresize, .bs-fbox.on .bs-fresize,
.bs-fbox:hover .bs-fw, .bs-fbox.on .bs-fw,
.bs-fbox:hover .bs-fh, .bs-fbox.on .bs-fh { display: block; }

/* --- зум полотна --- */
.bs-zoombar { display: inline-flex; gap: 4px; margin: 0 4px; vertical-align: middle; }
.bs-zbtn { width: 26px; height: 26px; border: 1px solid #d0d4da; background: #fff; border-radius: 6px;
           font-size: 15px; line-height: 1; color: #374151; cursor: pointer; padding: 0; }
.bs-zbtn:hover { border-color: #b9bfc7; }

/* --- положение блока --- */
.bs-move { margin: 10px 0 4px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-mhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 5px; }
.bs-mrow { display: flex; gap: 8px; }
.bs-mfield { display: flex; align-items: center; gap: 4px; font-size: 12px; color: #6b7280; }
.bs-num { width: 64px; padding: 5px 6px; border: 1px solid #d0d4da; border-radius: 6px; font-size: 12px; }

/* --- девять квадратов: блок в кадре и текст в блоке (как в Тильде) --- */
.bs-qline { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-start; }
.bs-qwrap { margin: 9px 0 2px; }
.bs-qwrap .bs-lab { font-size: 12px; color: #6b7280; margin: 0 0 4px; }
.bs-qgrid { display: grid; grid-template-columns: repeat(3, 26px); grid-auto-rows: 26px; gap: 4px; width: max-content; }
.bs-qcell { position: relative; padding: 0; border: 1px solid #d0d4da; border-radius: 6px; background: #fff; cursor: pointer; }
.bs-qcell::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #c6ccd4; }
.bs-qcell:hover { border-color: #8a93a0; }
.bs-qcell:hover::after { background: #8a93a0; }
.bs-qcell.on { background: #2b2d36; border-color: #2b2d36; }
.bs-qcell.on::after { background: #fff; }
/* --- шрифт, кегль, интервал, регистр --- */
.bs-type { margin: 10px 0 4px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-type .bs-lab { font-size: 12px; color: #6b7280; margin: 6px 0 3px; }
.bs-type .bs-lab:first-child { margin-top: 0; }
.bs-select { width: 100%; padding: 5px 6px; border: 1px solid #d0d4da; border-radius: 6px;
             font-size: 12px; background: #fff; color: #1f2937; }
.bs-trow { display: flex; gap: 8px; }
.bs-titem { flex: 1 1 0; }
.bs-titem .bs-num { width: 100%; box-sizing: border-box; }
.bs-case { display: flex; gap: 6px; }
.bs-caseb { flex: 1 1 0; padding: 5px 0; border: 1px solid #d0d4da; border-radius: 6px;
            background: #fff; font-size: 12px; cursor: pointer; color: #374151; }
.bs-caseb:hover { border-color: #b9bfc7; }
.bs-caseb.on { border-color: #f0b429; background: #fff7e6; color: #8a5a00; font-weight: 600; }

/* плашки: галочки включена/отключена */
.bs-feat-checks { margin-top: 12px; }
.bs-feat-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; cursor: pointer; font-size: 13px; }
.bs-feat-row input { width: auto; margin: 0; }
.bs-feat-row span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bs-feat-row.off span { opacity: .4; text-decoration: line-through; }

/* галерея фото проекта — видно все и можно выбрать */
.bs-photos { margin-top: 12px; }.bs-photo-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-top: 6px; }
.bs-photo-cell { padding: 0; border: 2px solid #d4d8de; border-radius: 8px; overflow: hidden;
                 cursor: pointer; background: #fff; }
.bs-photo-cell img { display: block; width: 100%; height: 56px; object-fit: cover; }
.bs-photo-cell:hover { border-color: #f0b429; }
.bs-photo-cell.on { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240, 180, 41, .25); }

/* мои проекты: галерея */
.bs-modal-wide { width: min(760px, 92vw); }
/* плитки в модалках-пикерах: квадратные, крупные — форсируем, сильнее старых правил */
.bs-modal-win .bs-modal-grid, .bs-photo-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; }
.bs-modal-win .bs-modal-grid > *, .bs-photo-grid > * { aspect-ratio: 1 / 1 !important; height: auto !important;
                                    min-height: 0; overflow: hidden; border-radius: 8px; border: 1px solid #e6e1d7;
                                    background: #faf8f4; }
.bs-modal-win .bs-modal-grid img, .bs-photo-grid img { width: 100% !important; height: 100% !important;
                                    object-fit: cover !important; display: block; }
.bs-proj-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 8px;
                overflow: auto; flex: 1 1 auto; min-height: 0; align-content: start; padding-right: 4px; }
.bs-proj-card { border: 1px solid #e2e5ea; border-radius: 10px; padding: 8px; display: flex;
                flex-direction: column; gap: 6px; background: #fff; }
.bs-proj-card.cur { border-color: #f0b429; box-shadow: 0 0 0 2px rgba(240, 180, 41, .2); }
.bs-proj-prev { height: 150px; border-radius: 6px; overflow: hidden; background: #f2f4f7; }
.bs-proj-prev iframe { width: 100%; height: 100%; border: 0; display: block; }
.bs-proj-name { font-weight: 600; font-size: 14px; }
.bs-proj-site { color: #778; font-size: 12px; word-break: break-all; }
.bs-proj-foot { margin-top: 12px; display: flex; justify-content: flex-end; }

/* сброс блоков и скрим */
.bs-reset-blocks { display: block; width: 100%; margin-top: 10px; }
.bs-scrim { margin-top: 12px; }
.bs-scrim-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.bs-scrim-row input[type="range"] { flex: 1 1 auto; min-width: 0; }
.bs-scrim-val { min-width: 44px; text-align: right; font-size: 13px; }
.bs-scrim-toggles { display: flex; gap: 16px; margin-top: 6px; }

/* --- история правок: «Отмена» / «Вернуть» в шапке --- */
.bs-hbox { display: inline-flex; align-items: center; gap: 6px; }
.bs-hbox button { padding: 6px 10px; font-size: 13px; white-space: nowrap; }

/* --- готовые форматы проекта: плитки в левой панели --- */
.bs-ready-count { text-transform: none; letter-spacing: 0; font-size: 12px; color: #17724a; font-weight: 600; }
.bs-ready { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.bs-rt { border: 1px solid #e3ded3; border-radius: 8px; background: #fff; padding: 6px; }
.bs-rt.on { border-color: #b7e0c4; }
.bs-rt-thumb { height: 88px; display: flex; align-items: center; justify-content: center;
               background: #f2efe8; border-radius: 5px; overflow: hidden; cursor: zoom-in; }
.bs-rt-thumb img { max-width: 100%; max-height: 100%; display: block; }
.bs-rt-none { font-size: 11.5px; color: #9a9282; }
.bs-rt-foot { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.bs-rt-name { flex: 1 1 auto; font-size: 11.5px; color: #55503f; }
.bs-rt-ok { color: #17724a; font-weight: 700; }
.bs-rt-go { margin: 0; padding: 2px 8px; font-size: 11.5px; }
.bs-rt-pdf { padding: 2px 6px; font-size: 10.5px; letter-spacing: .02em; }

/* --- «Сохранить комплект»: выбор форматов (JPG / PDF со ссылкой) --- */
.bs-spack-row { display: flex; align-items: center; gap: 8px; margin: 10px 0; font-size: 14px; }
.bs-spack-row input[type="text"] { flex: 1; min-width: 220px; padding: 6px 8px;
  border: 1px solid #d8d2c6; border-radius: 6px; font: inherit; }
.bs-spack-go { display: flex; gap: 10px; margin-top: 14px; }

/* --- «Мои проекты»: какие форматы уже собраны --- */
.bs-rcap { margin-top: 2px; }
.bs-rchips { display: flex; flex-wrap: wrap; gap: 4px; }
.bs-rchip { font-size: 10.5px; padding: 2px 6px; border-radius: 999px;
            border: 1px solid #dfe3e8; color: #9aa1ad; background: #fafbfc; }
.bs-rchip.on { border-color: #b7e0c4; background: #eefaf1; color: #17724a; }
.bs-rsum { font-size: 11.5px; color: #6b7280; margin-top: 4px; }
.bs-rsum.all { color: #17724a; font-weight: 600; }

/* --- «Сбросить блок» в свойствах слоя --- */
.bs-blocktools { margin-top: 12px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-blocktools .bs-note { display: inline; margin-left: 8px; }

/* --- «Применить ко всем форматам»: кнопка + всплывающая подсказка при наведении --- */
.bs-scope { margin-top: 10px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-applybtn { display: block; width: 100%; text-align: center; }
.bs-tip { position: relative; }
.bs-tipbox {
  position: absolute; left: 0; right: 0; top: calc(100% + 9px);
  background: #2f2c26; color: #f7f4ee; border-radius: 9px;
  padding: 10px 12px; font-size: 12px; line-height: 1.45;
  box-shadow: 0 10px 24px rgba(30, 25, 10, .25);
  opacity: 0; transform: translateY(-5px);
  transition: opacity .12s ease, transform .12s ease;
  pointer-events: none; z-index: 50;
}
.bs-tipbox::after {
  content: ""; position: absolute; bottom: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-bottom-color: #2f2c26;
}
.bs-tip:hover .bs-tipbox { opacity: 1; transform: translateY(0); transition-delay: .22s; }

/* --- материалы проекта: фото и логотип из библиотеки / скана --- */
body:not(.mode-set) .bs-assets { margin-top: 12px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
body:not(.mode-set) .bs-assets .bs-align { margin-top: 6px; }
.bs-lib-group { margin: 0 10px; padding: 6px 8px; font-size: 13px; max-width: 340px; }
.bs-lib-grid { display: block; column-count: 3; column-gap: 14px; padding: 12px 16px 4px; }
.bs-lib-cell { background: #fff; border: 1px solid #e6e1d6; border-radius: 10px; overflow: hidden;
               display: inline-block; width: 100%; margin: 0 0 14px;
               break-inside: avoid; -webkit-column-break-inside: avoid; }
.bs-lib-cell > a.bs-lib-shot { display: block; line-height: 0; background: #f2efe8; }
.bs-lib-cell img { display: block; width: 100%; height: auto; object-fit: contain; }
.bs-lib-title { font-weight: 600; font-size: 14px; margin: 8px 12px 0; color: #232120; }
.bs-lib-sub { font-size: 12px; color: #8a8272; margin: 2px 12px 8px; }
.bs-lib-dl { margin: 0 12px 12px; padding: 6px 10px; border: 1px solid #c6a15b; background: #c6a15b; font-weight: 600; border-radius: 8px;
            font-size: 13px; color: #1c1710; text-decoration: none; text-align: center; }
.bs-lib-dl:hover { border-color: #b8924e; background: #d4af6e; }
.bs-photo-scan { display: flex; gap: 8px; padding: 0 14px 10px; }
.bs-photo-scan input { flex: 1 1 auto; padding: 7px 9px; font-size: 13px; border: 1px solid #d5d0c4; border-radius: 7px; }
.bs-photo-scan-go { margin: 0; }
.bs-photo-name { display: block; font-size: 10.5px; color: #55503f; }

/* --- анимация «кадр собирается» в окне «Новый проект из сайта» --- */
.bs-build { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.bs-build-card { position: relative; width: 100%; max-width: 300px; aspect-ratio: 4 / 3; border-radius: 10px;
                 overflow: hidden; border: 1px solid #e3ded3;
                 background: linear-gradient(100deg, #efe9dd 28%, #fdfaf4 46%, #efe9dd 64%);
                 background-size: 220% 100%; animation: bsShimmer 3s linear infinite; }
.bs-build-beam { position: absolute; left: 0; right: 0; top: -34%; height: 34%;
                 background: linear-gradient(to bottom, rgba(198,161,91,0), rgba(198,161,91,.26), rgba(198,161,91,0));
                 animation: bsSweep 3s ease-in-out infinite; }
.bs-build-beam::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px;
                        background: rgba(198,161,91,.85); box-shadow: 0 0 9px rgba(198,161,91,.55); }
.bs-b { position: absolute; border-radius: 4px; background: #e6dfd0; opacity: .3;
        transition: opacity .5s ease, background .5s ease, transform .5s ease; transform: translateY(4px); }
.bs-b.on { opacity: 1; background: #cfc0a3; transform: none; }
.bs-b-logo  { left: 8%;  top: 8%;  width: 26%; height: 12%; }
.bs-b-head  { left: 8%;  top: 26%; width: 66%; height: 16%; }
.bs-b-sub   { left: 8%;  top: 46%; width: 52%; height: 9%; }
.bs-b-feats { left: 8%;  top: 62%; width: 84%; height: 14%; }
.bs-b-cta   { left: 8%;  top: 82%; width: 34%; height: 12%; border-radius: 999px; }
.bs-build-stage { font-size: 13px; color: #3f3a2e; max-width: 360px; }
.bs-build-bar { height: 6px; border-radius: 999px; background: #ece7dc; overflow: hidden; max-width: 300px; }
.bs-build-fill { height: 100%; width: 3%; border-radius: 999px;
                 background: linear-gradient(90deg, #c6a15b, #e6cf9c); transition: width .45s ease; }
.bs-build-meta { font-size: 11.5px; color: #8a8272; }
@keyframes bsShimmer { 0% { background-position: 180% 0; } 100% { background-position: -80% 0; } }
@keyframes bsSweep { 0% { top: -34%; } 50% { top: 100%; } 100% { top: -34%; } }

/* --- сохранение комплекта в папку на компьютере --- */.bs-save-pack { display: block; width: 100%; margin-top: 10px; padding: 8px 10px;
                border: 1px solid #c9d8c9; border-radius: 8px; background: #eff6ef;
                color: #17572f; font-size: 13px; cursor: pointer; }
.bs-save-pack:hover { background: #e2f0e2; }
.bs-save-pack:disabled { opacity: .5; cursor: default; }

/* --- «Тень (градиент)» в проекте: секция в свойствах слоя и линии зоны на кадре --- */
body:not(.mode-set) .bs-grad { margin-top: 14px; border-top: 1px dashed #e2ddd2; padding-top: 4px; }
body:not(.mode-set) .bs-grad .bs-gchips { margin-top: 6px; }
body:not(.mode-set) .bs-grad .bs-gsides { margin: 6px 0; }
body:not(.mode-set) .bs-grad .bs-trow { margin: 6px 0; }
body:not(.mode-set) .bs-grad .bs-sechead { padding: 4px 0 6px; }
.bs-fboxes .bs-gline { pointer-events: auto; }
.bs-fboxes .bs-gline .bs-gtag { pointer-events: none; }
.bs-fboxes .bs-gline .bs-gh { pointer-events: none; }

/* --- иконки плашек: свой набор и выбор вручную (creatives/icon_bank.js) --- */
.bs-icbtn { flex: 0 0 auto; margin: 0; padding: 2px 7px; font-size: 11px; min-width: 30px; }
.bs-icbtn.on { border-color: #f0b429; }
.bs-icbtn.open { border-color: #2b2d36; }
.bs-feat-row > span { flex: 1 1 auto; min-width: 0; }
.bs-icm { display: inline-block; width: 15px; height: 15px; background: #c6a15b;
         -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
         -webkit-mask-position: center; mask-position: center;
         -webkit-mask-size: contain; mask-size: contain; }
.bs-icpick { display: flex; flex-wrap: wrap; gap: 4px; margin: 4px 0 8px 21px; }
.bs-iccell { width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center;
            justify-content: center; border: 1px solid #d6dae0; border-radius: 7px;
            background: #fff; cursor: pointer; }
.bs-iccell:hover { border-color: #f0b429; }
.bs-iccell.on { border-color: #f0b429; background: #fff7e6; box-shadow: 0 0 0 2px rgba(240, 180, 41, .25); }
.bs-iccell .bs-icm { width: 18px; height: 18px; }
.bs-iccell.auto { width: auto; padding: 0 8px; font-size: 11px; color: #6b7280; }
.bs-iccell.auto.on { color: #8a5a00; font-weight: 600; }

/* --- кадрирование и размытие фото (панели «Фон» и «Скрим») --- */
.bs-cropblur { margin-top: 12px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-cropblur .bs-lab { font-size: 12px; color: #6b7280; margin: 6px 0 3px; }
.bs-cropblur .bs-cbrow { display: flex; align-items: center; gap: 8px; }
.bs-cropblur input[type="range"] { flex: 1 1 auto; min-width: 0; }
.bs-cbval { min-width: 44px; text-align: right; font-size: 13px; color: #2b2d36;
            font-variant-numeric: tabular-nums; }

/* --- «Шейп (плашка)»: блок поверх фото — панель свойств --- */
.bs-shapeblk { margin-top: 12px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-shapeblk .bs-lab { font-size: 12px; color: #6b7280; margin: 6px 0 3px; }
.bs-shapeblk .bs-cbrow { display: flex; align-items: center; gap: 8px; }
.bs-shapeblk input[type="range"] { flex: 1 1 auto; min-width: 0; }
.bs-shapeblk .bs-shapekill { margin-top: 8px; }

/* --- «Фон блока» и «Цвет текста»: подложка у любого текстового блока --- */
.bs-blockbg, .bs-textcolor { margin-top: 12px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-blockbg .bs-lab, .bs-textcolor .bs-lab { font-size: 12px; color: #6b7280; margin: 6px 0 3px; }
.bs-blockbg .bs-cbrow { display: flex; align-items: center; gap: 8px; }
.bs-blockbg input[type="range"] { flex: 1 1 auto; min-width: 0; }

/* «Сохранить»: те же понятные состояния, что у «Применить редактирование» */
#btnSave.is-busy {
  color: #eac97e; border-color: rgba(198,161,91,.55); background: rgba(198,161,91,.12);
  animation: bs-btn-pulse 1.15s ease-in-out infinite; cursor: progress;
}
#btnSave.is-done { background: #2e7b4e; border-color: #2e7b4e; color: #fff; }
#btnSave.is-error { background: #8f3a34; border-color: #8f3a34; color: #fff; }

/* --- подсказки: вкладка «Финал» и запас обрезки для «Фокуса» --- */
.bs-modehint { background: #fff7e6; border: 1px solid #f0d9a8; border-radius: 8px;
               padding: 7px 9px; margin: 0 0 10px; font-size: 12px; line-height: 1.45; color: #8a5a00; }
.bs-roomwarn { color: #8a5a00; }

/* --- смарт-центр кадра: маркер на кадре (тянется мышью) --- */
.bs-scent-layer { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: hidden;
                  pointer-events: none; z-index: 7; }
.bs-scent-line { position: absolute; background: rgba(198, 161, 91, .9); display: none; }
.bs-scent-line.h { left: 0; right: 0; height: 1px; }
.bs-scent-line.v { top: 0; bottom: 0; width: 1px; }
.bs-scent-layer.drag .bs-scent-line { display: block; }
.bs-scent { position: absolute; width: 28px; height: 28px; margin: -14px 0 0 -14px; border-radius: 50%;
            border: 2px solid #2b2d36; background: rgba(255, 255, 255, .96);
            box-shadow: 0 0 0 2px rgba(255, 255, 255, .6), 0 2px 9px rgba(0, 0, 0, .4);
            cursor: grab; pointer-events: auto; z-index: 8; touch-action: none; }
.bs-scent::after { content: ""; position: absolute; left: 50%; top: 50%; width: 8px; height: 8px;
                   margin: -4px 0 0 -4px; border-radius: 50%; background: #c6a15b;
                   box-shadow: 0 0 0 2px #2b2d36; }
.bs-scent:hover, .bs-scent.drag { border-color: #c6a15b; }
.bs-scent.drag { cursor: grabbing; background: #fff; }
.bs-scent.no-room { border-style: dashed; border-color: #6b6f76; opacity: .9; }
.bs-scent.no-room::after { background: #8a8577; box-shadow: 0 0 0 2px rgba(43, 45, 54, .5); }
.bs-sc-chip { position: absolute; left: 50%; top: 30px; transform: translateX(-50%); display: none;
              padding: 2px 7px; border-radius: 6px; background: rgba(43, 45, 54, .92); color: #fff;
              font-size: 11px; white-space: nowrap; }
.bs-scent.drag .bs-sc-chip { display: block; }
.bs-q { display: inline-flex; align-items: center; justify-content: center; width: 14px; height: 14px;
        margin-left: 5px; border-radius: 50%; border: 1px solid #b9b2a4; color: #8a8577;
        font-size: 10px; line-height: 1; cursor: help; position: relative; vertical-align: 1px; }
.bs-bubble { display: none; position: absolute; left: 0; right: 0; top: 100%; margin-top: 4px;
             z-index: 60; padding: 7px 9px; border-radius: 8px; background: rgba(43, 45, 54, .96);
             color: #fff; font-size: 11px; line-height: 1.45; white-space: normal; text-align: left;
             box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
.bs-q:hover ~ .bs-bubble { display: block; }

/* --- связка блоков: тянешь один — двигаются все (правая панель) --- */
.bs-group { margin: 10px 0 4px; border-top: 1px dashed #e2ddd2; padding-top: 8px; }
.bs-group .bs-lab { font-size: 12px; color: #6b7280; margin-bottom: 4px; }
.bs-grow { display: flex; gap: 6px; }
.bs-gbtn { flex: 1 1 auto; display: flex; align-items: center; gap: 7px; text-align: left;
           padding: 7px 9px; font-size: 12px; border: 1px solid #d0d4da; background: #fff;
           border-radius: 7px; cursor: pointer; color: #374151; }
.bs-gbtn:hover { border-color: #b9bfc7; }
.bs-gbtn.on { background: #2b2d36; border-color: #2b2d36; color: #ffd479; font-weight: 600; }
.bs-glock { display: inline-flex; flex: 0 0 auto; }
.bs-gstate { line-height: 1.3; }
.bs-greset { margin: 0; padding: 4px 10px; font-size: 13px; }
.bs-fbox.bs-linked { border-color: rgba(240, 180, 41, .95); }
.bs-fbox.on.bs-linked { border-color: #f0b429; box-shadow: 0 0 0 1px rgba(240, 180, 41, .35); }
.bs-fbox.bs-linked .bs-fbox-tag,
.bs-fbox.on.bs-linked .bs-fbox-tag { background: rgba(176, 123, 10, .95); }
.bs-fbox.bs-linked .bs-fbox-tag::after { content: " · связка"; opacity: .85; }

/* --- видимость блока: глазик в «Слоях» (как в Тильде) --- */
.bs-eye { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0;
          display: inline-flex; align-items: center; justify-content: center;
          border: 0; background: transparent; color: #2f6bff; cursor: pointer; border-radius: 5px; }
.bs-eye:hover { background: #eef2ff; }
.bs-eye:not(.on) { color: #b6bcc6; }

/* --- замок слоя: защита от случайного сдвига (как Lock в Тильде) --- */
.bs-lock { flex: 0 0 auto; width: 22px; height: 22px; margin: 0; padding: 0;
           display: inline-flex; align-items: center; justify-content: center;
           border: 0; background: transparent; color: #b6bcc6; cursor: pointer; border-radius: 5px; }
.bs-lock:hover { background: #f4f6f9; }
.bs-lock.on { color: #b07b0a; }
.bs-lockbtn.on { border-color: #f0b429; background: #fff7e6; color: #8a5a00; font-weight: 600; }
.bs-fbox.bs-locked { border-style: solid; border-color: rgba(43, 45, 54, .8); cursor: default; }
.bs-fbox.bs-locked .bs-fw, .bs-fbox.bs-locked .bs-fh, .bs-fbox.bs-locked .bs-fresize { display: none !important; }
.bs-fbox.bs-locked .bs-fbox-tag { background: rgba(43, 45, 54, .92); }
.bs-fbox.bs-locked .bs-fbox-tag::after { content: " · замок"; opacity: .9; }

/* --- группа блоков: выборочная сцепка (Group в Тильде) --- */
.bs-gsub { margin: 10px 0 2px; padding-top: 8px; border-top: 1px dashed #e2ddd2; font-size: 12px; color: #6b7280; }
.bs-gsel, .bs-gmem { margin-top: 4px; }
.bs-gmem.on { color: #17724a; }
.bs-grow .bs-glink { flex: 1 1 auto; margin: 0; }
.bs-grow .bs-gunlink { margin: 0; }
.bs-fbox.bs-grp { border-color: rgba(15, 138, 109, .85); }
.bs-fbox.bs-grp:not(.bs-locked) .bs-fbox-tag { background: rgba(15, 138, 109, .92); }
.bs-fbox.bs-grp:not(.bs-locked) .bs-fbox-tag::after { content: " · группа"; opacity: .85; }
.bs-fbox.bs-picked { border-color: #7c3aed; box-shadow: 0 0 0 1px rgba(124, 58, 237, .35); }
.bs-fbox.bs-picked .bs-fbox-tag { background: #7c3aed; }
.layer.bs-insel { box-shadow: inset 0 0 0 2px #7c3aed; }

/* --- «Ссылка креатива»: QR-код на кадре --- */
body.mode-set .bs-linksec { display: none; }
.bs-linksec .bs-linkbox { padding: 2px 0 4px; }
.bs-linklab { display: block; font-size: 12px; color: #6b7280; margin: 4px 0 6px; }
.bs-linkin { display: block; width: 100%; box-sizing: border-box; padding: 6px 8px; font-size: 12.5px;
             border: 1px solid #d0d4da; border-radius: 7px; margin-top: 3px; }
.bs-linkcheck { display: flex; align-items: flex-start; gap: 6px; font-size: 12.5px; color: #2b2d36;
                margin: 2px 0 6px; line-height: 1.35; }
.bs-linkrow { display: flex; gap: 10px; }
.bs-linkrow .bs-linklab { flex: 1 1 0; }
.bs-linkrow select { width: 100%; box-sizing: border-box; padding: 5px 6px; font-size: 12px;
                     border: 1px solid #d0d4da; border-radius: 6px; background: #fff; }
.bs-linkopen { flex: 1 1 auto; margin: 0; }

/* ===== Живые кнопки: нажал — «провалилась»; включено — вдавлено и цветное ===== */
button { transition: transform .07s ease, box-shadow .13s ease, background-color .16s ease,
                    border-color .16s ease, color .16s ease; }

/* нажатие — лёгкий «провал» */
button:not(:disabled):active { transform: translateY(1px); }
header button:not(:disabled):active { box-shadow: inset 0 2px 7px rgba(0,0,0,.5); }

/* светлые кнопки/переключатели — в покое «торчат» (лёгкий объём) */
.chips button:not(.on), .seg button:not(.on), .bs-mini:not(.on), .bs-gbtn:not(.on) {
  box-shadow: 0 1px 2px rgba(70,58,32,.14), inset 0 1px 0 rgba(255,255,255,.9);
}
/* при нажатии — вдавливаются */
.chips button:not(.on):active, .seg button:not(.on):active,
.bs-mini:active, .bs-gbtn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 5px rgba(70,58,32,.28);
}
/* включено — вдавлено и цветно */
.chips button.on, .seg button.on, .bs-mini.on, .bs-gbtn.on {
  box-shadow: inset 0 2px 5px rgba(0,0,0,.55), 0 1px 0 rgba(255,255,255,.28);
}

/* ===== Кнопка «Применить редактирование» показывает, что происходит ===== */
#btnRender { min-width: 205px; }
#btnRender.is-busy {
  color: #eac97e; border-color: rgba(198,161,91,.55); background: rgba(198,161,91,.12);
  animation: bs-btn-pulse 1.15s ease-in-out infinite; cursor: progress;
}
#btnRender.is-done { background: #2e7b4e; border-color: #2e7b4e; color: #fff; }
#btnRender.is-error { background: #8f3a34; border-color: #8f3a34; color: #fff; }
@keyframes bs-btn-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(198,161,91,0); }
  50% { box-shadow: 0 0 0 6px rgba(198,161,91,.15); }
}

/* Сдвиги групп: заголовок/подтекст и плашки/кнопка */
.bs-shifts-h { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8a8272; margin: 12px 0 6px; }
.bs-shifts label { color: #55503f; }
.bs-shift-val { color: #23221f; font-weight: 600; }
.bs-shifts .ghost { margin-top: 2px; }
.bs-shift { margin: 6px 0 8px; }
.bs-shift-name { display: block; color: #55503f; margin-bottom: 3px; }
.bs-pos { display: grid; grid-template-columns: repeat(3, 22px); gap: 3px; width: 72px; margin: 2px 0 6px; }
.bs-pos-c { width: 22px; height: 20px; border: 1px solid #cfc8b8; border-radius: 4px; background: #fff; cursor: pointer; padding: 0; position: relative; }
.bs-pos-c:hover { border-color: #8a8272; }
.bs-pos-c.on { border-color: #3f6f4f; background: #eef4ef; }
.bs-pos-c.on::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: #3f6f4f; }
.bs-shift-line { margin: 2px 0 8px; }
.bs-shift-top { display: flex; align-items: center; gap: 6px; color: #55503f; }
.bs-shift-top > span:first-child { flex: 1; }
.bs-shift-line input[type="range"] { width: 100%; }
.bs-shifts .bs-shift-top .bs-shift-num { width: 54px; padding: 2px 4px; border: 1px solid #cfc8b8; border-radius: 4px; background: #fff; color: #23221f; font: inherit; font-size: 12px; text-align: right; }
.bs-shift-unit { color: #8a8272; font-size: 11px; }
.bs-plate { display: block; width: 100%; margin: 10px 0 4px; padding: 7px 10px; border: 1px solid #cfc8b8; border-radius: 6px; background: #f6f3ea; color: #55503f; font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.bs-plate:hover { border-color: #8a8272; }
.bs-plate.on { background: #eef4ef; border-color: #3f6f4f; color: #2f5a3d; font-weight: 600; }
.grid .cell.sel { outline: 2px solid #3f6f4f; outline-offset: 2px; border-radius: 4px; }
.grid.shifts .frame iframe { pointer-events: none; }
.grid.shifts .frame { cursor: pointer; }

/* Удаление фото: крестик на плитке галереи */
.bs-photo-cell { position: relative; }
.bs-photo-del { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%;
                background: rgba(24, 26, 30, .62); color: #fff; font-size: 11px; line-height: 20px;
                text-align: center; cursor: pointer; user-select: none; opacity: .9; z-index: 2; }
.bs-photo-del:hover { background: #c0392b; opacity: 1; }

/* Удаление проекта: крестик в углу карточки «Мои проекты» */
.bs-proj-card { position: relative; }
.bs-proj-del { position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%;
               background: rgba(24, 26, 30, .55); color: #fff; font-size: 12px; line-height: 22px;
               text-align: center; cursor: pointer; z-index: 5; user-select: none; }
.bs-proj-del:hover { background: #c0392b; }

/* Окно «Сохранить»: способы выгрузки */
.bs-save-list { display: flex; flex-direction: column; gap: 8px; overflow: auto; min-height: 0; }
.bs-save-row { display: flex; gap: 12px; align-items: center; text-align: left; border: 1px solid #e2e5ea;
               border-radius: 10px; background: #fff; padding: 11px 13px; cursor: pointer; }
.bs-save-row:hover { border-color: #2b2d36; background: #f7f8fa; }
.bs-save-ico { font-size: 20px; width: 28px; text-align: center; }
.bs-save-text { display: flex; flex-direction: column; gap: 2px; }
.bs-save-t { font-size: 14px; }
.bs-save-d { font-size: 12px; color: #6b7280; }
.bs-kinds { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 6px 0; }
.bs-kind { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.bs-save-out { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; font-size: 13px; }
.bs-dirrow { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.bs-dirlab { width: 84px; color: #6b7280; flex: none; }
.bs-kindsel { flex: 1; min-width: 160px; padding: 5px 7px; border: 1px solid #d0d4da; border-radius: 6px; font-size: 13px; }
.bs-dirjson { max-height: 170px; overflow: auto; background: #f4f5f7; border-radius: 8px; padding: 8px;
              font-size: 11px; white-space: pre-wrap; margin: 0; }

/* ===== Адаптив под планшеты и мобильные (добавлено 07.10.2026) ===== */
@media (max-width: 1760px) {
  /* Шапке тесно (ноутбуки 1366–1760): элементы переносятся на вторую строку,
     «Сохранить» и «Применить редактирование» остаются видимыми */
  header { flex-wrap: wrap; gap: 8px 12px; }
}

@media (max-width: 1024px) {
  #left { width: 270px; min-width: 210px; }
  #side { width: 260px; min-width: 210px; }
}

@media (max-width: 860px) {
  header { flex-wrap: wrap; height: auto !important; padding: 8px 10px; gap: 6px 8px; }
  header .brand { font-size: 15px; }
  .spacer { display: none !important; }
  #status { max-width: 100%; white-space: normal; text-align: left; }
  main { flex-direction: column; overflow-y: auto; }
  .split { display: none !important; }
  #center { order: -1; min-height: 55vh; }
  #left, #side { width: auto !important; min-width: 0 !important; max-height: 46vh; flex: 0 0 auto; }
  #left { border-right: 0 !important; border-bottom: 1px solid #ddd8cc; }
  #side { border-left: 0 !important; border-top: 1px solid #ddd8cc; border-bottom: 0; }
  .toolbar { flex-wrap: wrap; gap: 6px 8px; }
  #tabbar { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  #tabbar .tab { flex: 0 0 auto; }
  .stage { padding: 10px; }
  /* мобильный режим «просмотр»: редакторские панели и кнопки скрыты */
  #side { display: none !important; }
  #btnRightPanel, #btnSave, #btnRender, #bsHistBox, #dirty,
  #btnResetBlocks, #btnShifts, #shiftsBox, #conceptMeta, #btnSavePack {
    display: none !important;
  }
  .ai-fab, .dup { display: none !important; }
  .bs-modal-win { height: auto; max-height: 88vh; }
  .bs-proj-grid { grid-template-columns: repeat(2, 1fr); }
  .bs-lib-grid { column-count: 2; }
  .bs-lib-cell img { height: auto; }
  #left > section:nth-of-type(2), #left > section:has(#layers) { display: none !important; }
  #stage .frame { pointer-events: none; }
}

@media (max-width: 560px) {
  .hide-sm { display: none !important; }
  header { padding: 6px 8px; }
  header .brand { font-size: 14px; }
  header .brand img { height: 17px !important; }
  header label.inline { font-size: 12.5px; }
  #left, #side { max-height: 30vh; }
  button, .toolbar select { font-size: 12px; }
  .tab { font-size: 12px; padding: 5px 9px; }
  .bs-proj-grid { grid-template-columns: 1fr; }
  .bs-lib-grid { column-count: 2; }
  .bs-modal-win { width: 96vw; padding: 10px 10px 12px; }
  .bs-lib-grid { padding: 8px 6px 4px; gap: 10px; }
  .bs-lib-title { margin: 7px 9px 0; }
  .bs-lib-sub { margin: 2px 9px 7px; }
  .bs-lib-dl { margin: 0 9px 9px; }
}


/* --- адаптив: страница не шире экрана ------------------------------- */
html, body { max-width: 100%; overflow-x: clip; }

header {
  flex-wrap: wrap !important;
  height: auto;
  min-height: 46px;
  row-gap: 6px;
}
header .proj { flex: 0 1 220px; min-width: 140px; }
header .proj select { max-width: 100%; }
header .status { max-width: 100%; }

main { min-width: 0; }
#center { min-width: 0; overflow: hidden; }
#stage { min-width: 0; }

@media (max-width: 1500px) {
  header { padding: 7px 10px; gap: 7px; }
  header .brand { font-size: 13px; }
  #left { width: 300px; min-width: 260px; }
  #side { width: 280px; }
  .split { width: 4px; }
}

@media (max-width: 1180px) {
  #left { width: 260px; min-width: 230px; }
  #side { width: 250px; }
  header .btn, header .tab { font-size: 11px; padding: 5px 8px; }
  header input, header select { font-size: 11px; }
  .hide-md { display: none !important; }
}

@media (max-width: 1100px) {
  main { position: relative; }
  #left, #side {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 60;
    width: min(330px, 88vw);
    min-width: 0;
    background: #fff;
    box-shadow: 0 10px 34px rgba(20, 15, 8, .22);
  }
  #left { left: 0; border-right: 1px solid #e6e1d8; }
  #side { right: 0; border-left: 1px solid #e6e1d8; }
  #left.panel-closed, #side.panel-closed { display: none; }
  #splitLeft, #splitRight { display: none; }
  #center { width: 100%; }
  .tabbar { overflow-x: auto; }
  .tabbar::-webkit-scrollbar { height: 4px; }
  header .spacer { flex: 1 1 12px; }
  footer { font-size: 10px; }
}

@media (max-width: 700px) {
  header { gap: 5px; padding: 6px 8px; }
  header .btn, header .tab { font-size: 10px; padding: 4px 6px; }
  header .proj { flex: 1 1 100%; order: 10; }
  header .proj select { width: 100%; max-width: none; }
  header .logo { font-size: 12px; }
  .formats { gap: 4px; padding: 4px 6px; }
  .fmt { font-size: 10px; padding: 4px 6px; }
  #left, #side { width: 92vw; }
  .stage-wrap { padding: 6px; }
  footer { display: none; }
}

/* --- просмотр образца на весь экран --- */
.bs-zoom { position: fixed; inset: 0; z-index: 90; background: rgba(12, 11, 9, .94);
           display: flex; align-items: center; justify-content: center; padding: 14px; }
.bs-zoom img { max-width: 96vw; max-height: 88vh; width: auto; height: auto;
               object-fit: contain; border-radius: 6px; box-shadow: 0 12px 48px rgba(0,0,0,.5); }
.bs-zoom-x { position: absolute; top: 10px; right: 12px; width: 42px; height: 42px;
             border: 0; border-radius: 50%; background: rgba(255,255,255,.14); color: #fff;
             font-size: 22px; line-height: 1; cursor: pointer; }
.bs-zoom-x:hover { background: rgba(255,255,255,.26); }
.bs-zoom-t { position: absolute; left: 16px; right: 16px; bottom: 12px; text-align: center;
             color: #f3ede2; font-size: 13px; line-height: 1.35; }