/* СВОБОДНО СТРОЕНЕ · v0.3 (DEV) · 06.10.2026 — изгледът на концепцията (navy + злато), Б1 сегменти, таблет и телефон */
#page-free{ --frNavy:#1c2c44; --frNavy2:#26395a; --frGold:#e8b978; --frGoldD:#b98a3e; --frInk:#1a2233; --frMut:#5d6878; --frLine:#dfe3ea; --frPaper:#fff; --frSoft:#eef2f7;
  --frInt:#fbf7ef; --frPanel:#e7d3b1; --frPanelLine:#8a7452; --frBarBg:#1c2c44; --frBarLine:#1c2c44; --frHalo:#fbf7ef; --frRed:#c0392b; --frOk:#2e8b57;
  --frMono:"JetBrains Mono",ui-monospace,Menlo,monospace; }
/* тъмната тема: лентата не е navy върху navy (по-светла + златен ръб), избраният отсек остава златен */
html.dark #page-free{ --frInk:#e8ecf3; --frMut:#9aa6b8; --frLine:#2a3850; --frPaper:#162033; --frSoft:#1b2740; --frInt:#1d2a40; --frPanel:#8a7452; --frPanelLine:#c9b089;
  --frBarBg:#2a3d5e; --frBarLine:rgba(232,185,120,.35); --frHalo:#1d2a40; --frGoldD:#d9a95c; }
#page-free.active{ display:block; }
#page-free .mono{ font-family:var(--frMono); font-variant-numeric:tabular-nums; }
/* ── лентата: един ред (името, Ш/В/Д, обковът, изгледът, фасадите, ↶ ↷ ? ⋯) ── */
.frBar{ position:relative; display:flex; flex-wrap:nowrap; align-items:center; gap:8px; padding:7px 10px; background:var(--frBarBg); border:1px solid var(--frBarLine); color:#c9d3e3; border-radius:12px; margin-bottom:10px; font-size:13px; min-height:50px; box-sizing:border-box; }
.frBar label{ display:flex; align-items:center; gap:5px; white-space:nowrap; }
.frBar input,.frBar select{ background:var(--frNavy2); border:1px solid #34507a; color:#fff; border-radius:8px; padding:6px 8px; font-size:13px; min-height:34px; box-sizing:border-box; }
.frBar input[type=number]{ width:70px; }
.frNameBox{ display:flex; align-items:stretch; min-width:0; flex:0 1 210px; }
.frNameBox .frName{ font-weight:800; color:var(--frGold); min-width:70px; width:100%; border-radius:8px 0 0 8px; }
.frNameBox .frIcon{ border-radius:0 8px 8px 0; border-left:0; }
.frBar .frSp{ flex:1 1 0; min-width:4px; }
.frBar button{ font:inherit; }
.frIcon{ background:var(--frNavy2); border:1px solid #34507a; color:var(--frGold); border-radius:8px; min-width:34px; min-height:34px; padding:0 8px; font-size:16px; cursor:pointer; flex:none; }
.frIcon:hover{ border-color:var(--frGold); }
.frHwChip{ display:flex; align-items:center; gap:4px; min-width:0; flex:0 1 auto; max-width:300px; background:transparent; border:1px solid #34507a; color:#c9d3e3; border-radius:8px; padding:0 10px; min-height:34px; font-size:12px; cursor:pointer; overflow:hidden; white-space:nowrap; }
.frHwChip b{ color:var(--frGold); font-weight:700; overflow:hidden; text-overflow:ellipsis; }
.frHwChip:hover{ border-color:var(--frGold); }
.frBarFronts{ display:contents; }
.frMenu{ position:absolute; top:calc(100% + 6px); right:8px; z-index:50; min-width:240px; background:var(--frNavy); border:1px solid #34507a; border-radius:12px; padding:6px; display:grid; gap:2px; box-shadow:0 14px 34px rgba(10,18,32,.35); }
.frMenuPick{ left:10px; right:auto; }
.frMenu button{ display:flex; justify-content:space-between; gap:12px; text-align:left; background:transparent; border:0; color:#e8ecf3; border-radius:8px; padding:9px 10px; font-size:13px; font-weight:700; cursor:pointer; min-height:36px; }
.frMenu button:hover, .frMenu button.on{ background:rgba(232,185,120,.14); color:var(--frGold); }
.frMenu .mono{ color:#9aa6b8; font-weight:600; }
.frMenu .frDanger{ color:#ffb4a8; }
.frMenuSeg{ display:grid; gap:4px; padding:8px 10px; color:#9aa6b8; font-size:12px; font-weight:700; }
/* ── Б1 сегментът: един контейнер, плъзгащ се палец (navy/злато на светло, злато/navy на navy) ── */
.frSeg{ position:relative; display:grid; grid-template-columns:repeat(var(--n),minmax(0,1fr)); background:var(--frSoft); border:1px solid var(--frLine); border-radius:12px; padding:3px; gap:0; flex:none; }
.frSegThumb{ position:absolute; top:3px; bottom:3px; left:calc(3px + (100% - 6px) / var(--n) * var(--i)); width:calc((100% - 6px) / var(--n)); background:var(--frNavy); border-radius:9px; box-shadow:0 3px 10px rgba(28,44,68,.22); transition:left .22s cubic-bezier(.2,.8,.2,1); }
.frSeg.none .frSegThumb{ display:none; }
.frSeg button{ position:relative; z-index:1; border:0; background:transparent; font:inherit; font-size:12px; font-weight:800; color:var(--frMut); padding:6px 6px; border-radius:9px; cursor:pointer; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:32px; display:flex; align-items:center; justify-content:center; gap:4px; }
.frSeg button:hover{ background:rgba(232,185,120,.12); }
.frSeg button:active{ transform:scale(.97); }
.frSeg button:focus-visible{ outline:none; box-shadow:0 0 0 2px var(--frGold); }
.frSeg button.on{ color:var(--frGold); }
html.dark #page-free .frSegThumb{ background:var(--frGold); }
html.dark #page-free .frSeg button.on{ color:var(--frNavy); }
.frBar .frSeg{ background:rgba(255,255,255,.1); border-color:transparent; border-radius:10px; }
.frBar .frSegThumb{ background:var(--frGold); border-radius:8px; }
.frBar .frSeg button{ color:#c9d3e3; min-width:38px; }
.frBar .frSeg button.on{ color:var(--frNavy); }
.frMenu .frSeg{ background:rgba(255,255,255,.08); border-color:transparent; }
.frMenu .frSegThumb{ background:var(--frGold); }
.frMenu .frSeg button{ color:#c9d3e3; min-height:32px; padding:6px; justify-content:center; }
.frMenu .frSeg button.on{ color:var(--frNavy); }
.frSegFront button{ flex-direction:column; gap:1px; font-size:10.5px; padding:5px 2px; min-height:44px; }
.frSegFront button i{ font-style:normal; font-size:15px; line-height:1; }
/* ── работното поле: фиксирана височина; скролва само панелът вдясно (фокусът в поле не мести страницата) ── */
.frWork{ display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:12px; align-items:stretch; height:calc(100vh - 150px); min-height:460px; overflow:hidden; }
.frMain{ display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; }
.frStage{ flex:1 1 auto; min-height:0; display:grid; gap:10px; grid-template-columns:minmax(0,1fr); }
.v-split .frStage{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); }
.frCanvas{ position:relative; background:var(--frPaper); border:1px solid var(--frLine); border-radius:12px; padding:6px; min-height:0; min-width:0; overflow:hidden; }
.frSide{ display:grid; gap:10px; align-content:start; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding:0 2px 12px 0; }
.fr3d{ min-height:0; border-radius:12px; background:var(--frNavy) center/contain no-repeat; cursor:grab; touch-action:none; -webkit-touch-callout:none; user-select:none; }
.fr3d:active{ cursor:grabbing; }
.frFit{ position:absolute; right:10px; bottom:10px; width:34px; height:34px; border-radius:9px; border:1px solid var(--frLine); background:var(--frPaper); color:var(--frInk); font-size:16px; cursor:pointer; opacity:.8; z-index:3; }
.frFit:hover{ opacity:1; border-color:var(--frGold); }
/* ── трохите ── */
.frCrumbs{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 6px; font-size:12.5px; color:var(--frMut); min-height:30px; }
.frCrumb{ border:1px solid var(--frLine); background:var(--frPaper); color:var(--frInk); border-radius:999px; padding:4px 11px; font-weight:700; font-size:12.5px; cursor:pointer; }
.frCrumb.on{ background:var(--frNavy); color:var(--frGold); border-color:var(--frNavy); cursor:default; }
span.frCrumb{ cursor:default; }
.frCrSep{ color:var(--frMut); }
.frCrKeys{ margin-left:auto; font-size:11.5px; color:var(--frMut); }
/* ── 2D чертежът ── */
#frSvg{ width:100%; height:100%; display:block; user-select:none; -webkit-user-select:none; touch-action:none; -webkit-touch-callout:none; }
#frSvg *{ vector-effect:non-scaling-stroke; }
#frSvg .frInt{ fill:var(--frInt); }
#frSvg .frCell{ fill:transparent; stroke:transparent; stroke-width:2.5px; cursor:pointer; }
#frSvg .frCell:hover{ fill:rgba(232,185,120,.10); stroke:rgba(232,185,120,.6); }
#frSvg .frCell.on{ fill:rgba(232,185,120,.20); stroke:var(--frGold); stroke-width:3px; }
#frSvg .frCell.frHit, #frSvg .frHit{ fill:rgba(192,57,43,.22) !important; stroke:var(--frRed) !important; stroke-width:2.5px; }
#frSvg .frGroup{ pointer-events:none; }
#frSvg .frGroup.on{ fill:rgba(232,185,120,.10); }
#frSvg .frSelBox{ fill:none; stroke:var(--frGold); stroke-width:3px; stroke-dasharray:10 6; pointer-events:none; }
#frSvg .frPanel{ fill:var(--frPanel); stroke:var(--frPanelLine); stroke-width:1px; }
#frSvg .frShelf{ fill:var(--frPanel); stroke:var(--frPanelLine); stroke-width:1px; cursor:ns-resize; }
#frSvg .frDiv{ cursor:ew-resize; }
#frSvg [data-role=fixedShelf]{ cursor:ns-resize; }
#frSvg .frDiv:hover, #frSvg [data-role=fixedShelf]:hover, #frSvg .frShelf:hover, #frSvg .frOuter:hover{ fill:var(--frGold); }
#frSvg .frPanel[data-role="side"], #frSvg .frPanel[data-role="bottom"], #frSvg .frPanel[data-role="plinth"], #frSvg .frPanel[data-role="top"]{ cursor:pointer; }
#frSvg .frPanel[data-role="side"]:hover, #frSvg .frPanel[data-role="bottom"]:hover, #frSvg .frPanel[data-role="plinth"]:hover{ fill:var(--frGold); }
#frSvg .frOuter[data-pid="sideR"]{ cursor:ew-resize; }
#frSvg .frOuter[data-role="top"]{ cursor:ns-resize; }
#frSvg .frPick{ fill:var(--frGold) !important; stroke:var(--frGoldD) !important; }
#frSvg .frRail{ stroke:#6d7a8c; stroke-width:5px; stroke-linecap:round; pointer-events:none; }
#frSvg .frRailHit{ stroke:transparent; cursor:ns-resize; }
#frSvg .frRailHit:hover + .frRail, #frSvg .frRail.frPick{ stroke:var(--frGold); }
#frSvg .frInner{ fill:rgba(28,44,68,.04); stroke:var(--frGoldD); stroke-width:1px; stroke-dasharray:6 4; pointer-events:none; }
/* фасадите: полупрозрачен тон на дървото, златен контур и дръжки (без синьо) */
#frSvg .frFront{ fill:rgba(231,211,177,.30); stroke:var(--frGoldD); stroke-width:1.6px; pointer-events:none; }
#frSvg .frFront.drawer{ fill:rgba(243,234,217,.50); }
#frSvg .frFront.ghost{ fill:rgba(232,185,120,.04); stroke:var(--frGold); stroke-dasharray:7 5; opacity:.85; }
#frSvg .frFront.frPick{ stroke:var(--frGold); stroke-width:3px; }
#frSvg .frSwing{ fill:none; stroke:var(--frGoldD); stroke-width:1px; stroke-dasharray:6 5; opacity:.75; pointer-events:none; }
#frSvg .frSwing.ghost{ opacity:.35; }
#frSvg .frPull{ fill:var(--frGoldD); pointer-events:none; }
#frSvg .frPull.ghost{ opacity:.4; }
#frSvg .frFront.slide{ fill:rgba(28,44,68,.05); stroke:var(--frGoldD); stroke-width:2px; stroke-dasharray:none; }
#frSvg .frFront.slide.t1{ fill:rgba(28,44,68,.02); stroke-dasharray:9 5; }
#frSvg .frFront.slide.f-mirror4{ fill:rgba(170,205,225,.35); }
#frSvg .frSlLbl{ fill:var(--frGoldD); font-family:var(--frMono); font-weight:700; text-anchor:middle; pointer-events:none; }
/* ивиците за хващане (невидими) и дръжката в средата на подвижната плоскост */
#frSvg .frHitBand{ fill:transparent; cursor:ns-resize; }
#frSvg .frHitBand[data-brole="divider"], #frSvg .frHitBand[data-brole="sideR"]{ cursor:ew-resize; }
#frSvg .frHitBand:hover{ fill:rgba(232,185,120,.16); }
#frSvg .frGrip{ fill:var(--frGoldD); opacity:.7; pointer-events:none; }
#frSvg .frOvDot{ fill:var(--frGold); stroke:var(--frNavy); stroke-width:1.5px; pointer-events:none; }
/* влаченето: водеща линия + пилюла, отворите 32 мм, живите отвори */
#frSvg .frGuide{ stroke:var(--frGold); stroke-width:1.6px; stroke-dasharray:8 4; pointer-events:none; }
#frSvg .frGuidePill rect{ fill:var(--frNavy); }
#frSvg .frGuidePill text{ fill:var(--frGold); font-family:var(--frMono); font-weight:700; text-anchor:middle; }
#frSvg .frGuidePill{ pointer-events:none; }
#frSvg .frHole{ fill:var(--frGoldD); opacity:.85; pointer-events:none; }
#frSvg .frLive, #frSvg .frGapLbl{ fill:var(--frGoldD); font-family:var(--frMono); font-weight:800; paint-order:stroke; stroke:var(--frHalo); stroke-width:.3em; stroke-linejoin:round; pointer-events:none; }
#frSvg .frGapLbl{ text-anchor:end; font-weight:700; }
/* размерите и веригите (цъкат се → пилюлата) */
#frSvg .frDim line, #frSvg .frChain line{ stroke:var(--frMut); stroke-width:1px; }
#frSvg .frDim text, #frSvg .frChain text{ fill:var(--frMut); font-family:var(--frMono); font-weight:600; text-anchor:middle; }
#frSvg .frDim text{ cursor:text; fill:var(--frInk); font-weight:700; }
#frSvg .frChain{ cursor:text; }
#frSvg .frChHit{ fill:transparent; }
#frSvg .frChain:hover text, #frSvg .frDim text:hover{ fill:var(--frGoldD); }
#frSvg .frChain:hover line{ stroke:var(--frGoldD); }
#frSvg .frChain.on text{ fill:var(--frGoldD); font-weight:800; }
/* надписите на отсеците: най-отгоре, с ореол в цвета на хартията */
#frSvg .frCellLbl{ fill:var(--frInk); font-family:var(--frMono); font-weight:600; text-anchor:middle; paint-order:stroke; stroke:var(--frHalo); stroke-width:.32em; stroke-linejoin:round; pointer-events:none; }
#frSvg .frCellLbl .frNm, #frSvg .frCellLbl.frNm{ font-weight:800; fill:var(--frGoldD); }
#frSvg .frCellLbl.on{ fill:var(--frGold); stroke:none; pointer-events:auto; cursor:text; }
#frSvg .frCellLbl.on .frNm, #frSvg .frCellLbl.frNm.on{ fill:var(--frGold); }
#frSvg .frCellLbl.frOut{ text-anchor:start; }
#frSvg .frCellLbl.frOut.on{ fill:var(--frGoldD); stroke:var(--frHalo); }
#frSvg .frCellPill{ fill:var(--frNavy); pointer-events:none; }
#frSvg .frLead{ fill:none; stroke:var(--frMut); stroke-width:1px; stroke-dasharray:4 3; pointer-events:none; }
/* ── пилюлата на размера, чипът при посочване, балонът при влачене, тостът ── */
.frPill{ position:absolute; z-index:20; transform:translate(-50%,-50%); display:flex; align-items:center; gap:8px; background:var(--frNavy); color:#c9d3e3; border:1px solid var(--frGold); border-radius:999px; padding:4px 6px 4px 12px; box-shadow:0 10px 26px rgba(10,18,32,.35); font-size:11.5px; white-space:nowrap; }
.frPill b{ color:var(--frGold); font-weight:800; }
.frPill input{ width:118px; background:#0f1a2c; color:#fff; border:1px solid #34507a; border-radius:999px; padding:6px 10px; font:700 15px var(--frMono); outline:none; }
.frPill input:focus{ border-color:var(--frGold); }
.frPill input.frBad{ border-color:var(--frRed) !important; box-shadow:0 0 0 2px rgba(192,57,43,.35); }
.frPillKeys{ color:#9aa6b8; font-size:10.5px; padding-right:6px; }
.frChip{ position:fixed; z-index:99998; display:none; background:var(--frNavy,#1c2c44); color:#e8b978; font:700 12.5px "JetBrains Mono",ui-monospace,monospace; padding:5px 10px; border-radius:8px; pointer-events:none; box-shadow:0 6px 16px rgba(10,18,32,.3); white-space:nowrap; }
.frToast{ position:fixed; left:50%; bottom:28px; transform:translateX(-50%); background:#1c2c44; color:#e8b978; font-weight:700; font-size:13px; padding:10px 16px; border-radius:10px; z-index:99999; display:flex; align-items:center; max-width:min(92vw,640px); pointer-events:none; box-shadow:0 10px 26px rgba(10,18,32,.35); }
.frToast .frToastBtn{ pointer-events:auto; margin-left:12px; background:#e8b978; color:#1c2c44; border:0; border-radius:8px; padding:6px 12px; font-weight:800; cursor:pointer; min-height:32px; }
/* ── панелът вдясно ── */
.frCard{ background:var(--frPaper); border:1px solid var(--frLine); border-radius:12px; padding:12px; display:grid; gap:8px; color:var(--frInk); font-size:13px; }
.frH{ font-weight:800; font-size:13.5px; color:var(--frInk); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.frMut{ color:var(--frMut); font-size:12.5px; font-weight:500; }
.frRow{ display:flex; flex-wrap:wrap; gap:6px; }
.frRow button, .frGhost{ border:1px solid var(--frLine); background:var(--frSoft); color:var(--frInk); border-radius:9px; padding:7px 11px; font-size:12.5px; font-weight:700; cursor:pointer; min-height:34px; }
.frRow button.on{ background:var(--frNavy); color:var(--frGold); border-color:var(--frNavy); }
.frRow button:hover, .frGhost:hover{ border-color:var(--frGold); }
.frF{ display:grid; gap:4px; font-size:12.5px; color:var(--frMut); font-weight:600; min-width:0; }
.frF input, .frF select{ width:100%; box-sizing:border-box; border:1px solid var(--frLine); border-radius:9px; padding:7px 9px; font-size:14px; background:var(--frPaper); color:var(--frInk); min-height:36px; }
.frF select{ font-size:13px; }
.frChk{ display:flex; align-items:center; gap:8px; font-size:13px; cursor:pointer; }
.frChk input{ width:18px; height:18px; accent-color:var(--frNavy); }
.frRow2{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.frSum .frCnt[data-lvl="warn"]{ color:#c7862b; font-weight:700; }
.frSum .frOk{ color:var(--frOk); font-weight:700; }

.frGram{ display:flex; flex-wrap:wrap; gap:4px; }
.frGram button{ border:1px dashed var(--frLine); background:transparent; color:var(--frInk); border-radius:7px; padding:4px 8px; font:700 12px var(--frMono); cursor:pointer; min-height:28px; }
.frGram button:hover{ border-color:var(--frGold); color:var(--frGoldD); }
.frSelTools button{ font-size:12px; }
.frCoach{ border:1px solid var(--frGold); box-shadow:0 0 0 3px rgba(232,185,120,.18); }
.frX{ border:0; background:transparent; color:var(--frMut); font-size:14px; cursor:pointer; min-width:28px; min-height:28px; border-radius:7px; }
.frX:hover{ background:var(--frSoft); }
.frUnder{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
#page-free input.frBad{ border-color:var(--frRed) !important; box-shadow:0 0 0 2px rgba(192,57,43,.25); }
.frStyleRow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:10px; align-items:end; }
.frInsp{ display:grid; gap:8px; border-top:1px dashed var(--frLine); padding-top:8px; }
.frEdgeBox{ width:100%; max-width:260px; height:auto; display:block; }
.frEdgeRect{ fill:var(--frPanel); stroke:none; opacity:.6; }
.frEdge{ stroke:var(--frPanelLine); stroke-width:5; stroke-linecap:round; cursor:pointer; opacity:.55; }
.frEdge:hover{ opacity:1; }
.frEdge.on{ stroke:var(--frGoldD); stroke-width:9; opacity:1; }
.frEdgeBox text{ font:700 10px var(--frMono); fill:var(--frMut); text-anchor:middle; pointer-events:none; }
.frEdgeBox .frEdgeDim{ fill:var(--frInk); font-size:12px; }
.frMats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:8px; }
.frPartList{ display:flex; flex-wrap:wrap; gap:6px; }
.frPartList button{ border:1px solid var(--frLine); background:var(--frSoft); color:var(--frInk); border-radius:8px; padding:6px 9px; font-size:12px; font-weight:700; cursor:pointer; }
.frPartList button .mono{ color:var(--frMut); font-weight:600; }
.frPartList button.ov{ border-color:var(--frGold); box-shadow:inset 3px 0 0 var(--frGold); }
.frPanCard{ border-color:var(--frGold); box-shadow:0 0 0 2px rgba(232,185,120,.25); }
.frSlide{ border-color:var(--frGoldD); }
.frSlFills{ display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:6px; }
.frSlFills select{ width:100%; min-width:0; border:1px solid var(--frLine); border-radius:8px; padding:6px; background:var(--frPaper); color:var(--frInk); }
.frSlPic{ height:120px; border-radius:10px; background:#fff center/contain no-repeat; border:1px solid var(--frLine); }
.frGo{ justify-self:start; background:var(--frNavy); color:var(--frGold); border:0; border-radius:10px; padding:11px 18px; font-weight:800; font-size:14px; cursor:pointer; min-height:40px; }
.frGo:hover{ box-shadow:0 0 0 2px var(--frGold); }
.frRow .frGo{ background:var(--frNavy); color:var(--frGold); border:0; }
/* ── началната страница: готовите мебели + твоите размери ── */
.frStart{ max-width:1040px; margin:18px auto 40px; display:grid; gap:16px; color:var(--frInk); }
.frStartHead h2{ margin:4px 0 6px; font-size:26px; }
.frStartHead p{ max-width:68ch; margin:0; }
.frEy{ font:800 11px/1 sans-serif; letter-spacing:.14em; text-transform:uppercase; color:var(--frGoldD); }
.frTiles{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.frTile{ display:grid; gap:4px; text-align:left; background:var(--frPaper); border:1px solid var(--frLine); border-radius:14px; padding:12px; cursor:pointer; color:var(--frInk); font:inherit; }
.frTile:hover{ border-color:var(--frGold); box-shadow:0 0 0 3px rgba(232,185,120,.2); }
.frTile b{ font-size:14.5px; }
.frTileDim{ color:var(--frMut); font-size:12px; }
.frThumb{ width:100%; height:150px; display:block; background:var(--frSoft); border-radius:10px; margin-bottom:6px; }
.frThumb .frInt{ fill:var(--frInt); }
.frThumb .frPanel{ fill:var(--frPanel); stroke:var(--frPanelLine); stroke-width:3; }
.frThumb .frInner{ fill:none; stroke:var(--frGoldD); stroke-width:4; stroke-dasharray:14 8; }
.frThumb .frRail{ stroke:#6d7a8c; stroke-width:18; stroke-linecap:round; }
.frThumb .frFront{ fill:rgba(232,185,120,.08); stroke:var(--frGoldD); stroke-width:6; stroke-dasharray:22 14; }
.frStartForm{ background:var(--frPaper); border:1px solid var(--frLine); border-radius:14px; padding:16px; display:grid; gap:12px; }
.frStartGrid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:10px; }
.frStartGrid label{ display:grid; gap:4px; font-size:12.5px; color:var(--frMut); font-weight:600; min-width:0; }
.frStartGrid input, .frStyleRow input{ width:100%; box-sizing:border-box; border:1px solid var(--frLine); border-radius:9px; padding:8px 10px; font-size:14px; background:var(--frPaper); color:var(--frInk); min-height:38px; }
.frOpens{ display:flex; flex-wrap:wrap; gap:8px; }
.frOpen{ border:1px solid var(--frLine); background:var(--frSoft); color:var(--frInk); border-radius:9px; padding:8px 12px; font-weight:700; cursor:pointer; }
/* ── заключено: страницата за продажба с живото демо ── */
.frLock{ padding:10px 0 30px; }
.frLockIn{ max-width:1080px; margin:10px auto; display:grid; grid-template-columns:1.05fr 1fr; gap:24px; align-items:center; background:var(--frNavy); color:#fff; border-radius:18px; padding:28px; box-shadow:0 20px 50px rgba(10,18,32,.25); }
.frLockIn .frEy{ color:var(--frGold); }
.frLockIn h2{ margin:6px 0 8px; font-size:30px; line-height:1.15; color:#fff; }
.frLead{ color:#c9d3e3; margin:0 0 12px; }
.frBen{ margin:0 0 16px; padding:0; list-style:none; display:grid; gap:10px; }
.frBen li{ padding-left:18px; position:relative; color:#c9d3e3; font-size:14px; }
.frBen li::before{ content:""; position:absolute; left:0; top:7px; width:8px; height:8px; border-radius:50%; background:var(--frGold); }
.frBen b{ color:#fff; }
.frCtas{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:12px; }
.frCta, .frCta2{ display:inline-flex; align-items:center; gap:10px; border-radius:12px; padding:12px 18px; font-weight:800; text-decoration:none; min-height:44px; box-sizing:border-box; }
.frCta{ background:var(--frGold); color:var(--frNavy); }
.frCta2{ border:1.5px solid var(--frGold); color:var(--frGold); }
.frCta span, .frCta2 span{ font-weight:600; opacity:.85; font-size:13px; }
.frCta:hover, .frCta2:hover{ filter:brightness(1.06); }

.frDemo{ background:#f6f4ef; border-radius:14px; overflow:hidden; border:1px solid #33476b; }
.frDemoSvg{ display:block; width:100%; height:auto; }
.frDemoSvg .frDmInt{ fill:#fbf7ef; }
.frDemoSvg .frDmP{ fill:#e7d3b1; stroke:#8a7452; stroke-width:.8; }
.frDemoSvg .frDmNew{ fill:#e8b978; }
.frDemoSvg .frDmRail{ stroke:#6d7a8c; stroke-width:3; stroke-linecap:round; }
.frDemoSvg .frDmDim{ fill:#5d6878; font:700 11px "JetBrains Mono",ui-monospace,monospace; text-anchor:middle; }
.frDemoSvg .frDmCard{ fill:#fff; stroke:#dfe3ea; }
.frDemoSvg .frDmTh{ fill:#1c2c44; font:800 13px sans-serif; }
.frDemoSvg .frDmTd{ fill:#1a2233; font:600 11.5px sans-serif; }
.frDemoSvg .frDmTd.mono{ font-family:"JetBrains Mono",ui-monospace,monospace; }
.frDemoSvg .frDmCap{ fill:#1c2c44; font:800 14px sans-serif; }
.frDemoSvg .frDmN{ fill:#b98a3e; }
.frDemoRun .frDm1, .frDemoRun .frDmC1{ animation:frDm1 9s infinite; }
.frDemoRun .frDm2, .frDemoRun .frDmC2{ animation:frDm2 9s infinite; }
.frDemoRun .frDm3, .frDemoRun .frDmC3{ animation:frDm3 9s infinite; }
.frDemoRun .frDmC1{ animation-name:frDmC1; }
.frDemoRun .frDmC2{ animation-name:frDmC2; }
@keyframes frDm1{ 0%,6%{ opacity:0; } 12%,96%{ opacity:1; } 100%{ opacity:0; } }
@keyframes frDm2{ 0%,36%{ opacity:0; } 42%,96%{ opacity:1; } 100%{ opacity:0; } }
@keyframes frDm3{ 0%,66%{ opacity:0; } 72%,96%{ opacity:1; } 100%{ opacity:0; } }
@keyframes frDmC1{ 0%,6%{ opacity:0; } 12%,33%{ opacity:1; } 38%,100%{ opacity:0; } }
@keyframes frDmC2{ 0%,36%{ opacity:0; } 42%,63%{ opacity:1; } 68%,100%{ opacity:0; } }
@media (prefers-reduced-motion:reduce){ .frDemoRun .frDm1, .frDemoRun .frDm2, .frDemoRun .frDm3, .frDemoRun .frDmC3{ animation:none; opacity:1; } .frDemoRun .frDmC1, .frDemoRun .frDmC2{ animation:none; opacity:0; } }
/* ── модалният прозорец (изтриване, клавиши) ── */
.frModal{ position:fixed; inset:0; z-index:100000; background:rgba(15,22,34,.55); display:flex; align-items:center; justify-content:center; padding:16px; }
.frModalIn{ background:#fff; color:#1a2233; border-radius:16px; padding:20px; width:min(560px,100%); max-height:86vh; overflow:auto; display:grid; gap:12px; box-shadow:0 30px 60px rgba(10,18,32,.4); border-top:4px solid #e8b978; }
html.dark .frModalIn{ background:#162033; color:#e8ecf3; }
.frModalIn .frH{ font-size:16px; color:inherit; }
.frModalIn .frMut{ color:#5d6878; }
.frModalBtns{ justify-content:flex-end; }
.frModalIn .frGhost{ border:1px solid #dfe3ea; background:#eef2f7; color:#1a2233; border-radius:9px; padding:9px 14px; font-weight:700; cursor:pointer; }
.frDangerBtn{ background:#a63a2c !important; color:#fff !important; }
.frKeys{ width:100%; border-collapse:collapse; font-size:13px; }
.frKeys td{ padding:6px 8px; border-bottom:1px solid #eef2f7; vertical-align:top; }
.frKeys kbd{ font:700 12px "JetBrains Mono",ui-monospace,monospace; background:#1c2c44; color:#e8b978; border-radius:6px; padding:3px 7px; white-space:nowrap; }
/* ── менюто вляво: точката на катинара ── */
#rdRail button[data-page="free"]{ position:relative; }
.frLockDot{ position:absolute; right:6px; top:6px; width:7px; height:7px; border-radius:50%; background:#e8b978; }
/* в менюто „Свободно строене“ няма лява колона (проект, шкафове, библиотека) и дясно меню на шкафа.
   Ключът е самата страница (:has), не клас на body — други модули пренаписват класовете на body. */
body:has(#page-free.active) #rdSide, body:has(#page-free.active) #rdSideTg, body:has(#page-free.active) #rdSbTg, body:has(#page-free.active) .sidebar{ display:none !important; }
body:has(#page-free.active){ margin-left:70px !important; }
body:has(#page-free.active) header{ margin-left:-14px; }
body:has(#page-free.active) .main{ margin-right:0 !important; }
/* ── „Дизайн“ с мебел от свободното строене: без формата на шаблоните, с бутон към свободното строене ── */
#frOpenCard{ display:none; }
body.frCurCustom #frOpenCard{ display:grid; gap:8px; padding:14px; margin:10px; border:1px solid #e8b978; border-radius:12px; background:#fff; color:#1a2233; box-shadow:0 0 0 3px rgba(232,185,120,.18); }
html.dark body.frCurCustom #frOpenCard{ background:#162033; color:#e8ecf3; }
#frOpenCard p{ margin:0; font-size:12.5px; color:#5d6878; }
#frOpenCard .frEy{ color:#b98a3e; }
#frOpenCard .frGo{ background:#1c2c44; color:#e8b978; border:0; border-radius:10px; padding:11px 16px; font-weight:800; cursor:pointer; }
body.frCurCustom:has(#page-design.active) #rdCabMenu, body.frCurCustom:has(#page-design.active) #rdSecFine{ display:none !important; }
/* чертежите на свободната мебел (#rdD2 → rdFreeDraw) */
.frDrawScr{ display:grid; gap:8px; }
.frDrawBar{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; padding:8px 10px; background:#1c2c44; color:#c9d3e3; border-radius:10px; font-size:12.5px; }
.frDrawBar b{ color:#e8b978; }
.frDrawBar .frMut{ color:#9aa6b8; flex:1; }
.frDrawBar .frGo{ background:#e8b978; color:#1c2c44; border:0; border-radius:8px; padding:7px 12px; font-weight:800; cursor:pointer; }
.frDrawScr .d2Body{ background:#fff; border-radius:10px; overflow:auto; }
/* ── таблет: по-тясна колона вдясно; лентата остава един ред (фасадите отиват в ⋯) ── */
@media (max-width:1180px){
  .frWork{ grid-template-columns:minmax(0,1fr) 300px; }
  .frBarFronts{ display:none; }
  .frHwL{ display:none; }
  .frHwChip{ max-width:170px; }
  .frCrKeys{ display:none; }
}
@media (max-width:1000px){ .frHwChip{ max-width:110px; } .frBar input[type=number]{ width:62px; } }
/* пръст: всички бутони и сегменти ≥ 44 px (Apple HIG / research §8.2) */
@media (pointer:coarse){
  #page-free button, #page-free .frSeg button, #page-free input, #page-free select, .frModal button{ min-height:44px; }
  #page-free .frIcon{ min-width:44px; }
  #page-free .frBar{ padding:6px 8px; min-height:58px; }
  #page-free .frBar input, #page-free .frBar select{ min-height:44px; }
  #page-free .frCrumb{ min-height:44px; padding:6px 13px; }
  #page-free .frGram button{ min-height:44px; }
  #page-free .frChk input{ width:24px; height:24px; }
}
/* ── телефон: лентата на два реда, чертежът залепва горе, свойствата отдолу; без хоризонтален скрол ── */
@media (max-width:759px){
  body:has(#page-free.active){ margin-left:0 !important; }
  body:has(#page-free.active) header{ margin-left:0 !important; }
  #page-free{ max-width:100vw; overflow-x:hidden; }
  #page-free .frBar{ flex-wrap:wrap; gap:6px; }
  #page-free .frNameBox{ flex:1 1 160px; }
  #page-free .frSp{ display:none; }
  #page-free .frHwChip{ display:none; }
  #page-free .frBar input[type=number]{ width:58px; }
  .frWork.phone{ display:flex; flex-direction:column; height:auto !important; overflow:visible; min-height:0; }
  .frWork.phone .frMain, .frWork.phone .frStage{ display:contents; }
  .frWork.phone .frCanvas{ position:sticky; top:0; z-index:5; height:40vh; min-height:240px; box-shadow:0 6px 14px rgba(10,18,32,.12); }
  .frWork.phone .fr3d{ height:200px; flex:none; }
  .frWork.phone .frSide{ overflow:visible; padding-bottom:70px; }
  .frLockIn{ grid-template-columns:1fr; padding:20px; }
  .frLockIn h2{ font-size:24px; }
  .frTiles{ grid-template-columns:1fr 1fr; }
  .frThumb{ height:110px; }
  .frPillKeys{ display:none; }
}