/* =====================================================================
   Конфигуратор «Эйра Декор» как страница сайта.
   Токены: prototypes-journal/system/tokens-v2.css («Стена и свет»).
   Правила: радиус 3px, теней в интерфейсе нет, кнопок-пилюль нет,
   выбор виден линией и тоном, основная кнопка одна.
   ===================================================================== */
:root{
  --ground:#e5e5dc; --paper:#eeeee6; --sand:#d3d4c8; --line:#c3c4b7; --line-strong:#787d72;
  --ink:#0f2226; --ink-2:#33494c; --muted:#4f6364; --tide:#2f6f6b; --tide-strong:#245a57;
  --deep:#0b1a1d; --deep-text:#f0f2ee; --error:#9c3b2e;
  --font-display:"Onest",system-ui,sans-serif; --font-sans:"Golos Text","Onest",system-ui,sans-serif;
  --radius:3px; --hit:44px; --page:clamp(16px,4vw,56px);
  --ease:cubic-bezier(.16,1,.3,1);
  --hdr:72px;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--ground);color:var(--ink);font:400 15px/1.5 var(--font-sans);-webkit-font-smoothing:antialiased}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--tide);outline-offset:2px;border-radius:2px}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}
.skip{position:absolute;left:8px;top:-60px;background:var(--ink);color:#fff;padding:10px 14px;border-radius:var(--radius);z-index:100}
.skip:focus{top:8px}

/* ---------- шапка, подвал и крошки: общий каркас assets/chrome/site-chrome.css ---------- */
/* основная кнопка инструмента */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;background:var(--ink);color:#eef0ea;border-radius:var(--radius);padding:13px 24px;font:500 14px var(--font-sans);text-decoration:none;min-height:var(--hit);transition:background .3s;white-space:nowrap}
.btn-primary:hover{background:#1b3438}
.btn-primary:active{transform:translateY(1px)}
.btn-primary[disabled]{opacity:.45;cursor:not-allowed}

/* ---------- инструмент ---------- */
.tool{display:grid;grid-template-columns:minmax(0,1fr) 440px;height:calc(100vh - var(--above-tool,105px));height:calc(100svh - var(--above-tool,105px));min-height:600px;border-bottom:1px solid var(--line-strong)}
.stage-col{display:flex;flex-direction:column;min-width:0;min-height:0;background:var(--sand)}
.stage-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;padding:0 20px;background:var(--ground);border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabs{display:flex;gap:22px;flex-wrap:wrap}
.tab{position:relative;padding:14px 0 11px;font:500 14.5px var(--font-sans);color:var(--muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;white-space:nowrap;min-height:var(--hit)}
.tab:hover{color:var(--ink)}
.tab[aria-selected="true"],.tab[aria-pressed="true"],.tab[aria-checked="true"]{color:var(--ink);border-bottom-color:var(--tide)}
.tabs.small .tab{font-size:13.5px;padding:14px 0 11px}
.stage{position:relative;flex:1;min-height:0;overflow:hidden;background:var(--sand);isolation:isolate}
#gl,#baLeft{position:absolute;inset:0;width:100%;height:100%}
#gl canvas,#baLeft{display:block;width:100%;height:100%;touch-action:none;outline-offset:-3px}
#gl canvas{cursor:grab}
#gl canvas.drag{cursor:grabbing}
#gl canvas.over{cursor:move}
#baLeft{pointer-events:none;z-index:2}
.vignette{position:absolute;inset:0;pointer-events:none;z-index:3;background:radial-gradient(ellipse 92% 88% at 50% 46%,transparent 56%,rgba(40,30,16,.16) 100%)}
#ovl{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:4;overflow:visible}
#ovl line,#ovl path,#ovl rect{fill:none}
#ovl .guide{stroke:#2f6f6b;stroke-width:1;stroke-dasharray:4 4}
#ovl .dim{stroke:#0f2226;stroke-width:1.3}
#ovl .halo{stroke:rgba(238,238,230,.85);stroke-width:4}
#ovl text{font:500 12.5px var(--font-sans);fill:#0f2226;paint-order:stroke;stroke:rgba(238,238,230,.92);stroke-width:4px;stroke-linejoin:round}
#ovl .sel{stroke:#2f6f6b;stroke-width:1.5;stroke-dasharray:6 4}
#ovl .sel.bad{stroke:#9c3b2e}
#ovl rect.zone{stroke:#9c3b2e;stroke-width:1.5;fill:rgba(156,59,46,.12)}
#ovl text.warn{fill:#9c3b2e}
#ovl .lead{stroke:#0f2226;stroke-width:1}
.stamp{position:absolute;left:14px;bottom:12px;z-index:5;font-size:12.5px;color:var(--ink);background:rgba(238,238,230,.88);padding:4px 10px;border-radius:var(--radius);pointer-events:none}
.hintbox{position:absolute;left:50%;top:14px;transform:translateX(-50%);z-index:5;font-size:13px;color:var(--ink);background:rgba(238,238,230,.88);padding:7px 12px;border-radius:var(--radius);pointer-events:none;max-width:calc(100% - 24px);text-align:center;transition:opacity .5s}
.loader{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;background:var(--sand);z-index:20;color:var(--ink-2);transition:opacity .4s}
.loader.off{opacity:0;pointer-events:none}
/* постер: готовый кадр сцены по умолчанию, пока грузится 3D */
.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:19;transition:opacity .45s;pointer-events:none}
.poster.off{opacity:0}
.has-poster .loader{background:transparent;flex-direction:row;align-items:flex-end;justify-content:center;padding-bottom:18px;gap:10px;font-size:13px}
.has-poster .loader .spin{width:16px;height:16px;border-width:2px}
.has-poster .loader>div:last-child{background:rgba(238,238,230,.9);padding:4px 10px;border-radius:var(--radius)}
.spin{width:28px;height:28px;border-radius:50%;border:2px solid rgba(15,34,38,.15);border-top-color:var(--tide);animation:sp 1s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.staticv{position:absolute;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;background:var(--sand);z-index:10;text-align:center}
.staticv canvas{max-width:100%;max-height:calc(100% - 60px);height:auto;border-radius:var(--radius)}
.staticv p{margin:0;max-width:52ch;color:var(--ink-2);font-size:14px}
.nogl .staticv{display:flex}
.nogl #gl,.nogl #ovl,.nogl .vignette{display:none}
.nogl.mode-ba.src-photo .staticv{display:none}

/* подпись под сценой */
.stage-foot{display:flex;align-items:center;gap:18px;padding:0 20px;min-height:48px;background:var(--ground);border-top:1px solid var(--line);flex-wrap:wrap}
.stage-foot .cap{font-size:13.5px;color:var(--ink-2);flex:1;min-width:180px}
.scrub{display:flex;align-items:center;gap:14px;flex:2;min-width:240px}
.scrub input{flex:1}
.textlink{font:500 14px var(--font-sans);color:var(--tide);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:8px;min-height:var(--hit);transition:color .2s}
.textlink:hover{color:var(--tide-strong)}
.textlink svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5;flex:none}
.textlink.quiet{color:var(--ink-2);text-decoration-color:var(--line-strong)}
.textlink.danger{color:var(--error)}
.textlink[disabled]{opacity:.4;cursor:not-allowed}
input[type=range]{-webkit-appearance:none;appearance:none;height:30px;background:transparent;cursor:pointer;accent-color:var(--tide);margin:0;width:100%}
input[type=range]::-webkit-slider-runnable-track{height:2px;background:var(--line-strong)}
input[type=range]::-moz-range-track{height:2px;background:var(--line-strong)}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;margin-top:-8px;border-radius:50%;background:var(--ink);border:3px solid var(--ground)}
input[type=range]::-moz-range-thumb{width:12px;height:12px;border-radius:50%;background:var(--ink);border:3px solid var(--ground)}

/* до / после */
.ba-handle{position:absolute;top:0;bottom:0;width:44px;margin-left:-22px;z-index:6;cursor:ew-resize;touch-action:none;display:none}
.ba-handle::before{content:"";position:absolute;left:21px;top:0;bottom:0;width:2px;background:#eef0ea;box-shadow:0 0 0 1px rgba(15,34,38,.25)}
.ba-handle i{position:absolute;left:6px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;background:#eef0ea;box-shadow:0 0 0 1px rgba(15,34,38,.3);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:13px;color:var(--ink);letter-spacing:-1px}
.ba-handle:focus-visible{outline:none}
.ba-handle:focus-visible i{outline:2px solid var(--tide);outline-offset:2px}
.mode-ba .ba-handle{display:block}
.mode-ba.src-photo .ba-handle{bottom:var(--tools-h,0px);z-index:10}
.ba-tag{position:absolute;top:14px;z-index:7;font-size:12.5px;color:var(--ink);background:rgba(238,238,230,.88);padding:4px 10px;border-radius:var(--radius);display:none;pointer-events:none}
.mode-ba .ba-tag{display:block}
.mode-ba .hintbox,.mode-explode .hintbox{display:none}
.ba-tag.l{left:14px}.ba-tag.r{right:14px}

/* примерка на фото */
.photo{position:absolute;inset:0;display:none;z-index:8;background:var(--sand)}
.mode-ba.src-photo .photo{display:block}
.mode-ba.src-photo #gl,.mode-ba.src-photo #baLeft,.mode-ba.src-photo .vignette,.mode-ba.src-photo #ovl,.mode-ba.src-photo .stamp,.mode-ba.src-photo .hintbox{display:none}
.photo canvas{position:absolute;touch-action:none}
.photo .drop{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:24px;color:var(--ink-2)}
.photo .drop b{font:500 22px var(--font-display);color:var(--ink);letter-spacing:-.01em}
.photo .drop p{margin:0;max-width:48ch;font-size:14px}
.photo .drop.over{background:rgba(47,111,107,.1)}
.photo-tools{position:absolute;left:0;right:0;bottom:0;z-index:9;background:rgba(238,238,230,.94);border-top:1px solid var(--line);padding:6px 16px;display:flex;flex-wrap:wrap;gap:4px 22px;align-items:center;font-size:13.5px;color:var(--ink-2)}
.photo-tools label{display:flex;align-items:center;gap:8px}
.photo-tools input[type=number]{width:84px;min-height:36px;border:0;border-bottom:1px solid var(--line-strong);background:transparent;padding:4px 2px}
.photo-tools input[type=range]{width:110px}
.photo-step{font-size:13.5px;color:var(--ink);flex-basis:100%;padding:4px 0 0}

/* ---------- панель ---------- */
.panel{display:flex;flex-direction:column;min-height:0;background:var(--ground);border-left:1px solid var(--line-strong)}
.panel-head{padding:18px 26px 0;border-bottom:1px solid var(--line)}
.panel-head h1{margin:0;font:500 24px/1.1 var(--font-display);letter-spacing:-.02em}
.panel-head p{margin:6px 0 0;font-size:14px;color:var(--ink-2);max-width:44ch}
.steps{display:flex;gap:24px;margin-top:6px}
.steps .tab{display:flex;gap:8px;align-items:baseline}
.steps .tab b{font:500 12px var(--font-sans);color:var(--tide);letter-spacing:.1em}
.panel-body{flex:1;min-height:0;overflow:auto;padding:6px 26px 28px;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent}
.step{display:none}
.step.on{display:block;animation:rise .45s var(--ease)}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.blk{padding:18px 0;border-top:1px solid var(--line)}
.blk:first-child{border-top:0}
.lbl{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin:0 0 4px;font:500 15px var(--font-display);letter-spacing:-.01em}
.lbl .v{font:400 14px var(--font-sans);color:var(--ink-2);text-align:right}
.say{margin:2px 0 12px;font-size:13.5px;color:var(--muted);max-width:46ch}
/* плитки без рамок: выбор видно линией и тоном */
.tiles{display:grid;gap:6px 6px}
.tile{display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 4px 8px;color:var(--muted);border-bottom:2px solid transparent;transition:color .2s,border-color .2s;text-align:center;font:500 13px/1.2 var(--font-sans);min-height:var(--hit);border-radius:2px}
.tile:hover{color:var(--ink)}
.tile[aria-checked="true"],.tile[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--tide)}
.tile svg{width:100%;max-width:92px;height:auto;display:block;overflow:visible}
.tile .th{display:block;width:100%;max-width:92px;aspect-ratio:1.5;border-radius:2px;position:relative;overflow:hidden}
.tile small{font:400 12px var(--font-sans);color:var(--muted);display:block}
.rooms{grid-template-columns:repeat(4,1fr)}
.styles{grid-template-columns:repeat(3,1fr);gap:10px 8px}
.styles .tile .th{max-width:none}
.forms{grid-template-columns:repeat(6,1fr)}
.forms3{grid-template-columns:repeat(3,1fr)}
.forms3 .tile svg{max-width:104px}
.forms .tile{padding:6px 2px}
.forms .tile svg{max-width:64px}
.rays{grid-template-columns:repeat(4,1fr)}
.rays .tile svg{max-width:64px}
.nums{display:flex;gap:4px 20px;flex-wrap:wrap}
.nums .tab{padding:8px 0 6px;min-height:40px}
.sw{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-start}
.swc{display:flex;flex-direction:column;align-items:center;gap:6px;padding:4px 2px 6px;border-bottom:2px solid transparent;font:400 12px/1.2 var(--font-sans);color:var(--muted);width:62px;text-align:center;transition:color .2s,border-color .2s;border-radius:2px}
.swc i{display:block;width:42px;height:42px;border-radius:2px;box-shadow:inset 0 0 0 1px rgba(15,34,38,.22)}
.swc:hover{color:var(--ink)}
.swc[aria-checked="true"]{color:var(--ink);border-bottom-color:var(--tide)}
.swc input[type=color]{position:absolute;opacity:0;width:0;height:0}
.mini{font-size:13.5px;color:var(--ink-2)}
/* список изделий на стене */
.list{display:flex;flex-direction:column}
.row{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;padding:6px 0;border-bottom:1px solid var(--line);text-align:left;width:100%;position:relative;transition:background .2s}
.row:hover{background:rgba(238,238,230,.7)}
.row .ic{width:44px;height:30px;color:var(--ink)}
.row .ic svg{width:100%;height:100%}
.row .t{display:block;font:500 14.5px/1.25 var(--font-sans)}
.row .t small{display:block;font:400 12.5px var(--font-sans);color:var(--muted)}
.row .p{font:500 14px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.row[aria-selected="true"]{background:var(--paper)}
.row[aria-selected="true"]::before{content:"";position:absolute;left:-26px;top:0;bottom:0;width:3px;background:var(--tide)}
.acts{display:flex;gap:4px 22px;flex-wrap:wrap;align-items:center}
.qty{display:inline-flex;align-items:center;gap:2px}
.qty button{width:var(--hit);height:var(--hit);font:400 22px var(--font-sans);color:var(--ink);border-radius:2px}
.qty button:hover{background:var(--paper)}
.qty output{min-width:32px;text-align:center;font:500 16px var(--font-display);font-variant-numeric:tabular-nums}
.coll-tabs{margin-bottom:6px}
.empty{padding:16px 0;color:var(--ink-2);font-size:14px}
.tag{font:500 12px var(--font-sans);color:var(--tide);margin-left:8px}
.tag.own{color:#7a5a1f}

/* миниатюры изделий (assets/thumbs, рендер той же 3D-сцены) */
.thumb{display:block;width:100%;aspect-ratio:3/2;border-radius:2px;overflow:hidden;background:#e5e5dc;position:relative}
.thumb img{display:block;width:100%;height:100%;object-fit:cover}
.thumb svg{display:none}
.thumb.noimg img{display:none}
.thumb.noimg svg{display:block;position:absolute;inset:18% 10%;width:80%;height:64%;color:var(--ink)}
.tiles .tile .thumb{max-width:none;opacity:.88;transition:opacity .2s}
.tiles .tile:hover .thumb,.tiles .tile[aria-checked="true"] .thumb{opacity:1}
.forms3 .tile{padding:4px 2px 6px}
.forms3 .tile span{display:block}
.forms3 .tile small{margin-top:-4px}
/* список «На стене»: карточки */
.cards{list-style:none;margin:2px 0 0;padding:0;display:flex;flex-direction:column}
.card{position:relative;display:flex;align-items:center;border-bottom:1px solid var(--line)}
.card .pick{flex:1;display:grid;grid-template-columns:72px 1fr auto;gap:12px;align-items:center;padding:7px 4px 7px 0;text-align:left;min-height:62px}
.card .thumb.sm{width:72px}
.card .t{font:500 14.5px/1.25 var(--font-sans)}
.card .t small{display:block;font:400 12.5px var(--font-sans);color:var(--muted);margin-top:2px}
.card .p{font:500 14px var(--font-display);font-variant-numeric:tabular-nums;white-space:nowrap}
.card .x{width:36px;height:44px;font:300 24px/1 var(--font-sans);color:var(--muted);border-radius:2px;flex:none}
.card .x:hover{color:var(--error)}
.card:hover{background:rgba(238,238,230,.6)}
.card.on{background:var(--paper)}
.card.on::before{content:"";position:absolute;left:-26px;top:0;bottom:0;width:3px;background:var(--tide)}
.addrow{display:flex;align-items:center;gap:12px;width:100%;padding:12px 0;font:500 15px var(--font-sans);color:var(--tide);text-align:left;border-bottom:1px solid var(--line);min-height:var(--hit)}
.addrow .plus{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid currentColor;border-radius:50%;font:400 19px/1 var(--font-sans)}
.addrow:hover{color:var(--tide-strong)}
.addrow.big{flex-direction:column;justify-content:center;gap:10px;padding:34px 0;font-size:18px;border:1px dashed var(--line-strong);border-radius:var(--radius);margin-top:6px}
.addrow.big .plus{width:48px;height:48px;font-size:28px}
.addpanel{padding:10px 0 4px;border-bottom:1px solid var(--line)}
.etitle span{font-size:16px}
/* панелька у выбранного изделия в сцене */
.ctxbar{position:absolute;z-index:6;display:flex;gap:2px;background:rgba(238,238,230,.94);border:1px solid var(--line);border-radius:var(--radius);padding:2px}
.ctxbar button{width:34px;height:34px;display:flex;align-items:center;justify-content:center;color:var(--ink);border-radius:2px}
.ctxbar button:hover{background:var(--ground)}
.ctxbar button#ctxDel:hover{color:var(--error)}
.ctxbar svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.5}
.toast.undo{bottom:140px;display:flex;align-items:center;gap:18px;pointer-events:none;padding:8px 10px 8px 16px}
.toast.undo.on{pointer-events:auto}
.toast.undo button{color:#9fd3cd;font:500 14px var(--font-sans);text-decoration:underline;text-underline-offset:3px;min-height:36px}

/* спецификация в панели */
.spec{width:100%;border-collapse:collapse;font-size:14px}
.spec td{padding:9px 0;border-top:1px solid var(--line);vertical-align:top}
.spec td:last-child{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-left:10px}
.spec td:nth-child(2){padding:0 6px}
.spec small{display:block;color:var(--muted);font-size:12.5px}
.spec tfoot td{border-top:1px solid var(--ink);font:500 17px var(--font-display);padding-top:12px}
.note{margin:10px 0 0;font-size:13px;color:var(--muted)}

/* низ панели */
.panel-foot{border-top:1px solid var(--line-strong);background:var(--paper);padding:12px 26px calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:16px;justify-content:space-between}
.sum{white-space:nowrap;font:500 22px/1 var(--font-display);letter-spacing:-.01em;font-variant-numeric:tabular-nums}
.sum small{display:block;font:400 12.5px var(--font-sans);color:var(--muted);margin-top:4px;letter-spacing:0}
.nextrow{display:flex;justify-content:flex-end;padding-top:6px}

/* брошюра */
.sheets{display:flex;flex-direction:column;gap:14px}
.sheetbox{border:1px solid var(--line);background:#fff;border-radius:var(--radius);overflow:hidden}
.sheet{container-type:inline-size;aspect-ratio:210/297;background:#fbfaf6;color:#0f2226;position:relative;overflow:hidden;font-family:var(--font-sans)}
.sheet .pad{position:absolute;inset:0;padding:7cqw 7.5cqw;display:flex;flex-direction:column}
.sheet h2{font:500 6.4cqw/1.05 var(--font-display);letter-spacing:-.02em;margin:0 0 2cqw}
.sheet h3{font:500 3.6cqw/1.2 var(--font-display);margin:0 0 1.2cqw;letter-spacing:-.01em}
.sheet p{font-size:2.6cqw;line-height:1.5;margin:0 0 1.6cqw;color:#33494c}
.sheet .eb{font-size:2.2cqw;letter-spacing:.14em;text-transform:uppercase;color:#4f6364;margin-bottom:2cqw}
.sheet .hero{position:relative;flex:1;min-height:0;border-radius:.8cqw;overflow:hidden;background:#d8d4ca;margin:3cqw 0}
.sheet .hero img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sheet .hero span{position:absolute;left:2cqw;bottom:1.6cqw;font-size:2cqw;color:rgba(15,34,38,.8);text-shadow:0 0 4px rgba(238,238,230,.9)}
.sheet table{width:100%;border-collapse:collapse;font-size:2.5cqw}
.sheet td,.sheet th{padding:1.5cqw 0;border-top:.2cqw solid #c3c4b7;text-align:left;vertical-align:top;font-weight:400}
.sheet th{font-weight:500;color:#4f6364;font-size:2.1cqw}
.sheet td.r,.sheet th.r{text-align:right;white-space:nowrap;padding-left:2.4cqw}
.sheet td:first-child,.sheet th:first-child{padding-right:2cqw}
.sheet td small{display:block;color:#4f6364;font-size:2.1cqw}
.sheet .tot{font:500 5cqw var(--font-display);text-align:right;margin-top:2cqw}
.sheet .foot{margin-top:auto;display:flex;justify-content:space-between;font-size:2cqw;color:#4f6364;border-top:.2cqw solid #c3c4b7;padding-top:1.6cqw}
.sheet .item{display:grid;grid-template-columns:34cqw 1fr;gap:3cqw;padding:2.4cqw 0;border-top:.2cqw solid #c3c4b7}
.sheet .item .dr{background:#e5e5dc;border-radius:.8cqw;display:flex;align-items:center;justify-content:center;height:27cqw;padding:1.5cqw}
.sheet .item .dr canvas{max-width:100%;max-height:100%}
.sheet dl{display:grid;grid-template-columns:auto 1fr;gap:.5cqw 2cqw;margin:0;font-size:2.3cqw}
.sheet dt{color:#4f6364}.sheet dd{margin:0;text-align:right}
.sheet ol{margin:0;padding:0;list-style:none;counter-reset:s}
.sheet ol li{counter-increment:s;display:grid;grid-template-columns:7cqw 1fr;gap:2cqw;padding:2.2cqw 0;border-top:.2cqw solid #c3c4b7;font-size:2.7cqw;line-height:1.45;color:#33494c}
.sheet ol li::before{content:counter(s,decimal-leading-zero);font:500 3cqw var(--font-display);color:#2f6f6b}
.sheet ol li b{display:block;color:#0f2226;font:500 3.1cqw var(--font-display)}
.spec .qty button{width:32px;height:32px;font-size:18px}
.spec .qty output{min-width:22px;font-size:15px}
#pgTabs{gap:6px 16px}
.sheetcap{font-size:12px;color:var(--muted);padding:6px 2px 0}
#printRoot{display:none}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,16px);background:var(--ink);color:#eef0ea;border-radius:var(--radius);padding:10px 16px;font-size:14px;opacity:0;pointer-events:none;transition:.25s;z-index:80;max-width:90vw}
.toast.on{opacity:1;transform:translate(-50%,0)}
dialog{border:0;border-radius:var(--radius);padding:0;max-width:min(640px,94vw);width:100%;background:var(--paper);color:var(--ink)}
dialog::backdrop{background:rgba(15,34,38,.5)}
dialog .dh{padding:22px 24px 8px}
dialog h3{margin:0 0 6px;font:500 20px var(--font-display)}
dialog p{margin:0;color:var(--ink-2);font-size:14px}
dialog textarea{display:block;width:calc(100% - 48px);margin:12px 24px;height:240px;border:1px solid var(--line-strong);border-radius:var(--radius);padding:12px;background:#fff;font:13.5px/1.5 ui-monospace,Consolas,monospace;resize:vertical}
dialog .df{display:flex;gap:20px;justify-content:flex-end;padding:0 24px 18px;flex-wrap:wrap;align-items:center}

/* ---------- узкие экраны ---------- */
@media (max-width:1200px){.tool{grid-template-columns:minmax(0,1fr) 400px}.styles{grid-template-columns:repeat(3,1fr)}.forms{grid-template-columns:repeat(3,1fr)}}
@media (max-width:900px){
  .ec-top{position:static}
  .tool{display:block;height:auto;min-height:0}
  .stage-col{position:sticky;top:0;z-index:30;height:54svh;min-height:300px;max-height:520px}
  .stage-bar{padding:0 12px;gap:0 14px}
  .stage-bar .tabs{gap:16px}
  .tab{font-size:13.5px;padding:10px 0 8px;min-height:40px}
  .stage-foot{padding:0 12px;min-height:44px;gap:2px 14px}
  #roomCap,.stage-foot .cap:not(#exCap){display:none}
  #exCap{flex-basis:100%;font-size:12.5px;padding-bottom:6px}
  .scrub{min-width:0;flex:1 1 200px}
  #quick{margin-left:auto}
  .panel{border-left:0;display:block}
  .panel-head{padding:14px 16px 0}
  .panel-head p{display:none}
  .panel-body{overflow:visible;padding:4px 16px 120px}
  .panel-foot{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 16px calc(10px + env(safe-area-inset-bottom))}
  .row[aria-selected="true"]::before{left:-16px}
  .card.on::before{left:-16px}
  .rooms{grid-template-columns:repeat(4,1fr)}
  .styles{grid-template-columns:repeat(3,1fr)}
  .forms{grid-template-columns:repeat(3,1fr)}
  .toast{bottom:100px}
  .stage-bar .cams{display:none}
  .hintbox{display:none}
}
@media (max-width:560px){.rooms{grid-template-columns:repeat(4,1fr)}.rooms .tile{font-size:12px}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation-duration:.01ms!important;scroll-behavior:auto!important}}

/* печать: брошюра */
@media print{
  @page{size:A4;margin:0}
  html,body{background:#fff}
  body>*:not(#printRoot){display:none!important}
  #printRoot{display:block}
  #printRoot .sheet{width:210mm;height:297mm;aspect-ratio:auto;page-break-after:always;break-after:page;border:0}
  #printRoot .sheet:last-child{page-break-after:auto;break-after:auto}
  #printRoot .sheet{-webkit-print-color-adjust:exact;print-color-adjust:exact}
}

/* ---------- каркас сайта вокруг инструмента и мост с разделом «Для бизнеса» (src/05-site.js) ---------- */
.cfg-crumbs{padding:2px 20px 2px;border-bottom:1px solid var(--line);font-size:13px}
.cfg-crumbs a,.cfg-crumbs span{padding:6px 0}
.b2b-bar .ec-in{max-width:none;padding-inline:20px}
.b2b-bar .btn-primary{min-height:36px;padding:0 16px;font-size:14px}
.b2b-bar .bb-keep{flex-basis:100%;font-size:12.5px;color:var(--muted)}
@media (min-width:901px){.from-b2b .panel-foot .b2b-return{display:none}}
@media (max-width:959px){.b2b-bar{display:block;position:static}}
@media (max-width:900px){.b2b-bar .btn-primary{display:none}.b2b-bar .ec-in{padding-inline:16px}.cfg-crumbs{padding-inline:16px}}