@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

*{box-sizing:border-box}
:root{
  --ink:#0d0f10;--muted:#777d81;--quiet:#a8adb0;--line:#e8e9e9;
  --panel:#fff;--stage:#f4f5f5;--control:#f7f7f7;
  --brand:#ad5b2d;--board:#9b6a49;--joist:#526b7b;--belt:#bd6848;--pile:#72777a;
  --r:10px;--shadow:0 10px 30px rgba(17,20,22,.055);
}
html,body{height:100%}
body{margin:0;overflow:hidden;background:var(--stage);color:var(--ink);font:12px/1.4 Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}

/* PRODUCT HEADER */
.appHeader{
  height:76px;padding:0 30px;display:grid;grid-template-columns:minmax(270px,390px) 1fr auto;
  align-items:center;gap:24px;background:rgba(255,255,255,.96);border-bottom:1px solid var(--line);
  position:relative;z-index:100;backdrop-filter:blur(20px)
}
.brand{min-width:0;overflow:hidden}
.brandWordmark{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:14px;width:max-content;max-width:100%;user-select:none}
.brandLogoMark{display:block;width:43px;height:48px;object-fit:contain}
.brandText{display:flex;min-width:0;flex-direction:column;justify-content:center}
.brandName{font-size:23px;line-height:1;font-weight:650;letter-spacing:3.2px;white-space:nowrap}
.brandTagline{margin-top:7px;color:#8b9093;font-size:6.2px;font-weight:500;letter-spacing:.62px;white-space:nowrap}
.plannerTitle{display:none}
.topNav{justify-self:center;display:flex;gap:40px}
.topNav a{position:relative;padding:28px 0;text-decoration:none;color:#767c80;font-size:11px;font-weight:500;transition:.18s ease}
.topNav a:hover{color:#111}
.topNav a:first-child{color:#111}
.topNav a:first-child:after{content:"";position:absolute;left:0;right:0;bottom:18px;height:1.5px;background:#111;border-radius:2px}
.headerCta{justify-self:end;height:44px;padding:0 20px;border:0;border-radius:9px;background:#101213;color:#fff;font-size:11px;font-weight:600;display:flex;align-items:center;gap:18px;transition:.18s ease}
.headerCta:hover{background:#292c2e;transform:translateY(-1px)}
.headerCta span{font-size:18px;font-weight:400}

/* APP SHELL */
main{height:calc(100vh - 76px);display:grid;grid-template-columns:326px minmax(0,1fr) 370px;transition:grid-template-columns .22s cubic-bezier(.2,.8,.2,1)}
aside{position:relative;min-width:0;background:#fff;overflow:auto;scrollbar-width:thin;scrollbar-color:#dfe1e2 transparent}
.settingsPanel{padding:22px 18px 34px;border-right:1px solid var(--line)}
.result{padding:18px;border-left:1px solid var(--line)}
.panelContent{min-width:0}
.panelToggle{position:absolute;top:14px;z-index:80;width:27px;height:27px;border:1px solid #e1e3e4;border-radius:8px;background:rgba(255,255,255,.95);color:#979da0;font-size:18px;line-height:1;box-shadow:0 3px 10px rgba(0,0,0,.03)}
.panelToggle:hover{color:#111;border-color:#cfd2d3}
.leftToggle{right:8px}.rightToggle{left:8px}

/* LEFT: QUIET, SEQUENTIAL */
.setupSection{display:grid;grid-template-columns:38px 1fr;gap:10px;padding:10px 0 21px}
.setupSection+.setupSection{padding-top:21px;border-top:1px solid #f0f1f1}
.stepNo{padding-top:1px;color:#bec2c4;font-size:11px;font-weight:600;letter-spacing:.04em}
.stepBody h2{margin:0 0 14px;font-size:16px;line-height:1.2;font-weight:650;letter-spacing:-.35px}
label{display:block;margin:11px 0 6px;color:#7b8185;font-size:9px;font-weight:500}
small{display:block;margin-top:7px;color:#92989b;font-size:8.5px;line-height:1.5}
input,select{width:100%;height:43px;padding:0 12px;border:1px solid #dfe2e3;border-radius:8px;outline:none;background:#fafafa;font-size:10.5px;transition:.15s ease}
input:hover,select:hover{background:#fff;border-color:#d1d5d6}
input:focus,select:focus{background:#fff;border-color:#9da3a6;box-shadow:0 0 0 3px rgba(15,17,18,.045)}
.sizeGrid{display:grid;grid-template-columns:1fr 1fr;gap:9px}
.compactGrid{margin-top:8px}
.secondaryBtn{width:100%;height:38px;margin-top:8px;border:1px solid #dfe2e3;border-radius:8px;background:#fff;color:#50565a;font-size:10px;font-weight:500;transition:.15s}
.secondaryBtn:hover{background:#f6f7f7;border-color:#ccd0d1}
.lengthOptions{display:flex;gap:6px}
.lengthOptions label{flex:1;height:36px;margin:0;border:1px solid #e1e3e4;border-radius:8px;background:#fafafa;color:#5f6568;display:flex;align-items:center;justify-content:center;gap:6px}
.lengthOptions input,.checkrow input{width:auto;height:auto;accent-color:#111}
.checkrow{display:flex;align-items:center;gap:8px;margin-top:14px;color:#404548}
.constructionFacts{display:flex;flex-wrap:wrap;gap:5px;margin:10px 0}
.constructionFacts span{padding:6px 8px;border-radius:6px;background:#f4f5f5;color:#747a7e;font-size:8px}
#calc{width:100%;height:44px;margin-top:16px;border:0;border-radius:9px;background:#111314;color:#fff;font-size:11px;font-weight:600;box-shadow:0 7px 16px rgba(0,0,0,.08);transition:.18s}
#calc:hover{background:#292c2e;transform:translateY(-1px)}
.hidden{display:none!important}

/* CENTRAL INDUSTRIAL CANVAS */
.workspace{position:relative;min-width:0;overflow:hidden;display:flex;justify-content:center;background:#f1f2f2}
.workspaceTop{position:absolute;z-index:30;left:22px;right:22px;top:18px;display:flex;align-items:center;justify-content:space-between;pointer-events:none}
.workspaceTop .eyebrow,.panelHead .eyebrow{display:block;color:#a0a5a8;font-size:7.5px;font-weight:600;letter-spacing:1.55px}
.workspaceTop strong{display:block;margin-top:4px;font-size:14px;font-weight:650;letter-spacing:-.25px}
.viewSwitch{pointer-events:auto;display:flex;padding:3px;border:1px solid #dfe2e3;border-radius:10px;background:rgba(255,255,255,.94);box-shadow:0 6px 18px rgba(0,0,0,.045);backdrop-filter:blur(14px)}
.viewSwitch button{width:54px;height:34px;border:0;border-radius:7px;background:transparent;color:#8b9093;font-size:10px;font-weight:600}
.viewSwitch button.active{background:#111314;color:#fff;box-shadow:0 3px 8px rgba(0,0,0,.12)}
.canvasWrap{width:100%;min-width:0;padding:68px 22px 18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.canvasToolbar,.canvasFooter,.canvasViewport{width:min(1120px,100%);min-width:0}
.canvasToolbar{display:flex;align-items:center;justify-content:space-between;gap:12px}
.layerControls,.zoomControls{display:flex;align-items:center;gap:3px;padding:4px;border:1px solid #e0e2e3;border-radius:10px;background:rgba(255,255,255,.95);box-shadow:0 6px 20px rgba(20,24,26,.045);backdrop-filter:blur(16px)}
.layerChip{position:relative;height:32px;margin:0!important;padding:0 10px!important;border-radius:7px;display:flex!important;align-items:center;gap:7px;color:#72787b!important;font-size:8.5px!important;cursor:pointer;transition:.15s}
.layerChip input{position:absolute;opacity:0}
.layerChip:has(input:checked){background:#f1f2f2;color:#202426!important;box-shadow:inset 0 0 0 1px #e5e7e7}
.layerSwatch{display:inline-block;width:15px;height:3px;border-radius:3px}
.layerSwatch.dot{width:7px;height:7px;border-radius:50%}
.boardLayer .layerSwatch{background:var(--board)}.joistLayer .layerSwatch{background:var(--joist)}.beltLayer .layerSwatch{background:var(--belt)}.pileLayer .layerSwatch{background:var(--pile)}
.zoomControls button{height:32px;min-width:32px;border:0;border-radius:7px;background:transparent;color:#5f6568;font-size:10px}
.zoomControls button:hover{background:#f1f2f2;color:#111}
.zoomControls .iconBtn{display:flex;align-items:center;justify-content:center;padding:0}
.zoomControls svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.zoomValue{min-width:50px!important;font-variant-numeric:tabular-nums}
.canvasViewport{
  position:relative;height:min(74vh,720px);min-height:470px;overflow:hidden;isolation:isolate;border:1px solid #e3e5e5;border-radius:12px;background-color:#fbfbfa;
  background-image:
    linear-gradient(rgba(90,98,103,.115) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,98,103,.115) 1px,transparent 1px),
    linear-gradient(rgba(90,98,103,.042) 1px,transparent 1px),
    linear-gradient(90deg,rgba(90,98,103,.042) 1px,transparent 1px);
  background-size:
    var(--grid-major-x,80px) var(--grid-major-y,80px),
    var(--grid-major-x,80px) var(--grid-major-y,80px),
    var(--grid-minor-x,40px) var(--grid-minor-y,40px),
    var(--grid-minor-x,40px) var(--grid-minor-y,40px);
  background-position:
    var(--grid-origin-x,50%) var(--grid-origin-y,50%),
    var(--grid-origin-x,50%) var(--grid-origin-y,50%),
    var(--grid-origin-x,50%) var(--grid-origin-y,50%),
    var(--grid-origin-x,50%) var(--grid-origin-y,50%);
  box-shadow:0 18px 50px rgba(22,26,28,.045)
}
.canvasViewport:after{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;background:radial-gradient(circle at 50% 48%,transparent 0,transparent 55%,rgba(235,237,237,.2) 100%)}
.canvasViewport.panning{cursor:grabbing}body.spacePan .canvasViewport{cursor:grab}
.canvasScene{position:absolute;left:50%;top:50%;width:0;height:0;overflow:visible;transform-origin:0 0;will-change:transform;z-index:2}
#terrace{position:relative;min-width:0!important;min-height:0!important;flex:none;overflow:hidden;transform:translate(-50%,-50%);transform-origin:center;background:#fff;border:1px solid #32383b;box-shadow:0 16px 38px rgba(24,28,30,.055)}
#terrace.freeShape{background:transparent;border-color:transparent;box-shadow:none}
.constructionLayer{position:absolute;inset:0;z-index:1;overflow:hidden;background:#fff}
#terrace.freeShape .constructionLayer{background:#fff}
.boardPiece,.joistLine,.beltLine,.pileDot,.dimLabel{position:absolute;pointer-events:none}
.boardPiece{background:rgba(155,106,73,.018);border:0;box-shadow:inset 0 -1px 0 rgba(125,85,57,.63)}
.boardPiece.alt{background:rgba(155,106,73,.018)}
.joistLine,.joistLine.double{z-index:2;background:var(--joist);opacity:.8}
.beltLine{z-index:1;background:var(--belt);opacity:.9}
.pileDot{z-index:3;width:8px;height:8px;border-radius:50%;background:var(--pile);border:1.5px solid #fff;box-shadow:0 0 0 1px rgba(80,86,89,.38);transform:translate(-50%,-50%)}

/* CAD GEOMETRY */
.polygonEditor{position:absolute;inset:0;width:100%;height:100%;z-index:20;overflow:visible;touch-action:none}
.polygonFill{fill:rgba(255,255,255,.01);stroke:#202527;stroke-width:2.2;vector-effect:non-scaling-stroke}
.openPolyline{fill:none;stroke:#202527;stroke-width:2.2;vector-effect:non-scaling-stroke}
.vertexHandle{fill:#fff;stroke:#1d2224;stroke-width:2.2;vector-effect:non-scaling-stroke;cursor:grab}
.vertexHandle:hover{fill:#f5f6f6;stroke:var(--brand)}
.vertexHandle.closeTarget{fill:#fff;stroke:var(--brand)}
.addHandle{fill:#fff;stroke:var(--brand);stroke-width:2;vector-effect:non-scaling-stroke;cursor:pointer}
.edgeLabelBg{fill:rgba(255,255,255,.97);stroke:#dfe2e3;stroke-width:1;vector-effect:non-scaling-stroke;pointer-events:none}
.edgeLabel{fill:#161a1c;stroke:#fff;stroke-width:3px;vector-effect:non-scaling-stroke;font-family:Inter,sans-serif;font-weight:600;letter-spacing:.01em;paint-order:stroke;pointer-events:auto;cursor:pointer}
.engineeringDimension{position:absolute;z-index:12;pointer-events:none;color:#272c2f;font-size:9px;font-weight:600}
.engineeringDimension.x{left:8%;right:8%;top:8px;height:18px;text-align:center;border-top:1px solid rgba(50,56,59,.45)}
.engineeringDimension.y{top:8%;bottom:8%;left:8px;width:18px;border-left:1px solid rgba(50,56,59,.45);display:flex;align-items:center;justify-content:center}
.engineeringDimension.x:before,.engineeringDimension.x:after{content:"";position:absolute;top:-4px;width:1px;height:8px;background:rgba(50,56,59,.45)}
.engineeringDimension.x:before{left:0}.engineeringDimension.x:after{right:0}
.engineeringDimension.y:before,.engineeringDimension.y:after{content:"";position:absolute;left:-4px;width:8px;height:1px;background:rgba(50,56,59,.45)}
.engineeringDimension.y:before{top:0}.engineeringDimension.y:after{bottom:0}
.engineeringDimension.x span,.engineeringDimension.y span{background:#fff;border:1px solid #e9ebeb;border-radius:4px;padding:2px 5px;box-shadow:0 2px 6px rgba(0,0,0,.025)}
.engineeringDimension.x span{position:relative;top:-9px}.engineeringDimension.y span{transform:rotate(-90deg);white-space:nowrap}
.planCornerMark{position:absolute;right:9px;bottom:9px;z-index:11;padding:4px 7px;border:1px solid #e8eaea;border-radius:5px;background:rgba(255,255,255,.95);color:#9aa0a3;font-size:7px;letter-spacing:.06em}
.canvasFooter{display:flex;align-items:center;justify-content:space-between;gap:12px}
.legend{display:flex;gap:14px;padding:7px 11px;border:1px solid #e2e4e4;border-radius:9px;background:rgba(255,255,255,.94);color:#888e91;font-size:8px;box-shadow:0 4px 14px rgba(0,0,0,.025)}
.legend span{display:flex;align-items:center;gap:5px}.legend i{display:inline-block;width:14px;height:2px}.boardKey{background:var(--board)}.regularJoistKey{background:var(--joist)}.beltKey{background:var(--belt)}.pileKey{width:7px!important;height:7px!important;border-radius:50%;background:var(--pile)}
.canvasHint{color:#9da2a5;font-size:8px}

/* RIGHT: MATERIAL + SPEC AS PRODUCT CARDS */
.rightSection{padding:2px 2px 18px;border-bottom:1px solid #eff0f0}
.rightSectionHead{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.rightSectionHead h2{margin:0;font-size:16px;font-weight:650;letter-spacing:-.3px}
.rightSectionHead span{color:#9aa0a3;font-size:8px}
.materialSwatches{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.materialSwatch{padding:0;border:0;background:transparent;color:#7c8285;font-size:8px}
.materialSwatch .swatch{display:block;height:54px;margin-bottom:6px;border:1px solid #e0e2e3;border-radius:7px}
.materialSwatch.active .swatch{outline:2px solid #171a1b;outline-offset:2px}
.sw1{background:linear-gradient(135deg,#1f1a18,#4a3930)}.sw2{background:linear-gradient(135deg,#5b3325,#a76442)}.sw3{background:linear-gradient(135deg,#6f7070,#b8b8b6)}.sw4{background:linear-gradient(135deg,#8a6849,#c7aa82)}.sw5{background:linear-gradient(135deg,#242729,#55595b)}
.materialHero{margin-top:16px}
.materialBoardPreview{height:128px;border-radius:9px;background:repeating-linear-gradient(90deg,#292625 0 10px,#171717 10px 12px);box-shadow:inset 0 0 0 1px rgba(255,255,255,.035),0 10px 24px rgba(0,0,0,.06)}
.materialHero>div:last-child{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.materialHero strong{font-size:13px}.materialHero span{color:#9aa0a3;font-size:8px}
.specCard{margin-top:16px;padding:16px;border:1px solid #e9ebeb;border-radius:11px;background:#fff;box-shadow:0 10px 28px rgba(20,24,26,.035)}
.panelHead{padding-bottom:10px}.panelHead h2{margin:5px 0 0;font-size:16px;font-weight:650;letter-spacing:-.3px}
.result p{display:flex;justify-content:space-between;gap:12px;min-height:33px;margin:0;padding:8px 0;border-bottom:1px solid #f0f1f1;color:#7b8184;font-size:9.5px}
.result p b{text-align:right;color:#1d2123;font-weight:600;font-variant-numeric:tabular-nums}
.result h3{margin:19px 0 5px;padding-top:13px;border-top:1px solid #eff0f0;color:#a0a5a8;font-size:7.5px;font-weight:600;letter-spacing:1.2px;text-transform:uppercase}
.rowPlans{max-height:160px;margin-top:8px;overflow:auto;border:1px solid #eceeee;border-radius:8px;background:#fafafa}
.rowPlan{display:flex;justify-content:space-between;gap:8px;padding:7px 9px;border-bottom:1px solid #eee;font-size:8.5px}
.info,#tech{margin-top:11px;padding:10px;border-radius:8px;background:#f5f6f6;color:#73797c;font-size:8.5px;line-height:1.5}

/* COLLAPSE */
body.leftCollapsed main{grid-template-columns:42px minmax(0,1fr) 370px}
body.rightCollapsed main{grid-template-columns:326px minmax(0,1fr) 42px}
body.leftCollapsed.rightCollapsed main{grid-template-columns:42px minmax(0,1fr) 42px}
body.leftCollapsed .settingsPanel,body.rightCollapsed .result{padding:0;overflow:hidden}
body.leftCollapsed .settingsPanel .panelContent{display:none}
body.rightCollapsed .result .panelContent{display:none}
body.leftCollapsed .leftToggle{left:7px;right:auto;transform:rotate(180deg)}
body.rightCollapsed .rightToggle{left:7px;transform:rotate(180deg)}

/* 3D */
.threeViewport{position:absolute;inset:0;z-index:40;background:#f1f2f2}
.threeViewport canvas{display:block;width:100%!important;height:100%!important}
body.view3d .canvasScene{display:none}
body.view3d .threeViewport{display:block!important}
body.view3d .zoomControls{visibility:hidden}

@media(max-width:1400px){
  .appHeader{grid-template-columns:280px 1fr auto;padding:0 22px;gap:16px}
  .brandWordmark{grid-template-columns:40px 1fr;gap:10px}.brandLogoMark{width:37px;height:43px}.brandName{font-size:20px;letter-spacing:2.5px}.brandTagline{font-size:5.4px}
  .topNav{gap:24px}
  main{grid-template-columns:290px minmax(0,1fr) 330px}
  body.leftCollapsed main{grid-template-columns:42px minmax(0,1fr) 330px}
  body.rightCollapsed main{grid-template-columns:290px minmax(0,1fr) 42px}
}
@media(max-width:1160px){.topNav{display:none}.appHeader{grid-template-columns:1fr auto}.result{display:none}main{grid-template-columns:285px minmax(0,1fr)}}

/* =========================================================
   NIMTECH DESIGN SYSTEM V2 — visible structural redesign
   Apple / Ajax / Tesla / Pro-Digital inspired, own identity
   ========================================================= */

:root{
  --v2-bg:#eef0f1;
  --v2-card:#ffffff;
  --v2-ink:#0a0c0d;
  --v2-muted:#747b7f;
  --v2-line:#e1e4e5;
  --v2-dark:#0d0f10;
  --v2-brand:#ad5b2d;
  --v2-shadow:0 18px 48px rgba(15,18,20,.07);
}

/* App shell becomes card-based rather than three flat columns */
body{background:var(--v2-bg)}
.appHeader{
  height:68px;
  padding:0 24px;
  grid-template-columns:340px 1fr auto;
  background:rgba(247,248,248,.92);
  border-bottom:0;
  box-shadow:0 1px 0 rgba(12,15,17,.06);
}
.brandWordmark{grid-template-columns:42px 1fr;gap:12px}
.brandLogoMark{width:38px;height:43px}
.brandName{font-size:21px;letter-spacing:3.5px;font-weight:650}
.brandTagline{font-size:5.8px;letter-spacing:.75px;color:#9a9fa2}
.topNav{
  padding:4px;
  gap:3px;
  border:1px solid #e2e5e6;
  border-radius:11px;
  background:rgba(255,255,255,.72);
}
.topNav a{
  min-width:96px;
  padding:9px 15px;
  text-align:center;
  border-radius:8px;
  color:#848a8e;
  transition:.16s ease;
}
.topNav a:first-child{
  background:#fff;
  color:#111;
  box-shadow:0 3px 10px rgba(0,0,0,.05);
}
.topNav a:first-child:after{display:none}
.topNav a:hover{background:#fff;color:#111}
.headerCta{
  height:40px;
  border-radius:10px;
  padding:0 18px;
  box-shadow:0 8px 18px rgba(10,12,13,.12);
}

main{
  height:calc(100vh - 68px);
  grid-template-columns:352px minmax(0,1fr) 390px;
  gap:12px;
  padding:12px;
  background:var(--v2-bg);
}
aside{
  background:transparent;
  border:0!important;
  overflow:auto;
}
.settingsPanel,.result{padding:0;background:transparent}

/* Left becomes stack of premium product cards */
.settingsPanel .panelContent{
  display:flex;
  flex-direction:column;
  gap:10px;
  padding:0;
}
.setupSection{
  position:relative;
  grid-template-columns:30px 1fr;
  gap:10px;
  padding:17px 16px 18px;
  margin:0;
  border:1px solid rgba(220,224,225,.9)!important;
  border-radius:14px;
  background:rgba(255,255,255,.96);
  box-shadow:0 8px 26px rgba(15,18,20,.035);
}
.setupSection+.setupSection{padding-top:17px}
.stepNo{
  width:25px;height:25px;padding:0;
  display:flex;align-items:center;justify-content:center;
  border-radius:8px;
  background:#f0f2f2;
  color:#7d8386;
  font-size:9px;
  font-weight:700;
}
.stepBody h2{
  font-size:15px;
  margin:3px 0 14px;
  letter-spacing:-.4px;
}
.stepBody label{
  margin-top:12px;
  text-transform:none;
  letter-spacing:0;
}
input,select{
  height:44px;
  border-radius:10px;
  border:1px solid #e0e3e4;
  background:#f7f8f8;
  font-size:10.5px;
}
input:hover,select:hover{background:#fff}
.secondaryBtn{
  border-radius:10px;
  height:40px;
}
.lengthOptions label{
  height:38px;
  border-radius:10px;
  background:#f7f8f8;
}
.constructionFacts span{
  border-radius:999px;
  padding:6px 9px;
  background:#f0f2f2;
}
#calc{
  height:46px;
  border-radius:11px;
  box-shadow:0 10px 20px rgba(10,12,13,.13);
}

/* Workspace becomes a single hero instrument */
.workspace{
  border:1px solid #dde1e2;
  border-radius:16px;
  background:#e9ecec;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}
.workspaceTop{
  left:20px;right:20px;top:18px;
}
.workspaceTop strong{
  font-size:15px;
  letter-spacing:-.45px;
}
.workspaceTop .eyebrow{
  color:#8e9497;
}
.viewSwitch{
  padding:4px;
  border-radius:12px;
  background:rgba(255,255,255,.9);
  box-shadow:0 12px 26px rgba(12,15,17,.075);
}
.viewSwitch button{
  width:56px;height:34px;border-radius:8px
}

/* Toolbar floats over the canvas instead of feeling like another row */
.canvasWrap{
  padding:72px 16px 14px;
  gap:0;
  justify-content:center;
}
.canvasToolbar{
  position:relative;
  z-index:20;
  width:calc(100% - 28px);
  max-width:none;
  margin-bottom:-48px;
  padding:8px 10px;
  pointer-events:none;
}
.layerControls,.zoomControls{
  pointer-events:auto;
  border:1px solid rgba(219,223,224,.95);
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-radius:12px;
  box-shadow:0 12px 26px rgba(12,15,17,.075);
}
.layerChip{height:34px;border-radius:8px}
.zoomControls button{height:34px}

/* CAD field more like a physical design surface */
.canvasViewport{
  width:100%;
  max-width:none;
  height:calc(100% - 32px);
  min-height:520px;
  border:0;
  border-radius:14px;
  background-color:#fdfdfc;
  box-shadow:inset 0 0 0 1px rgba(211,215,216,.9),0 22px 52px rgba(15,18,20,.055);
}
.canvasViewport:after{
  background:linear-gradient(to bottom,rgba(255,255,255,.22),transparent 18%,transparent 82%,rgba(236,238,238,.22));
}
#terrace{
  border-color:#303537;
  box-shadow:0 18px 44px rgba(22,26,28,.07);
}
.boardPiece{
  box-shadow:inset 0 -1px 0 rgba(127,84,55,.58);
}
.joistLine,.joistLine.double{opacity:.72}
.beltLine{opacity:.86}

/* CAD handles = precision instrument, not generic SVG controls */
.vertexHandle{
  stroke-width:1.8;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.08));
}
.vertexHandle:hover{fill:#fff7f1;stroke:var(--v2-brand)}
.addHandle{
  fill:#fff;
  stroke:var(--v2-brand);
  filter:drop-shadow(0 2px 5px rgba(173,91,45,.14));
}
.edgeLabelBg{
  fill:rgba(255,255,255,.985);
  stroke:#d9ddde;
}
.edgeLabel{
  fill:#0f1213;
  font-weight:650;
}

/* Footer almost disappears */
.canvasFooter{
  width:calc(100% - 28px);
  max-width:none;
  margin-top:10px;
}
.legend{
  border:0;
  background:transparent;
  box-shadow:none;
  padding:5px 2px;
  color:#8c9295;
}
.canvasHint{color:#a2a7a9}

/* Right rail = dashboard cards, not a long white column */
.result .panelContent{
  display:flex;
  flex-direction:column;
  gap:10px;
}
.rightSection,.specCard{
  margin:0;
  padding:16px;
  border:1px solid rgba(220,224,225,.92);
  border-radius:14px;
  background:rgba(255,255,255,.97);
  box-shadow:0 8px 26px rgba(15,18,20,.035);
}
.rightSection{border-bottom:1px solid rgba(220,224,225,.92)}
.rightSectionHead h2{font-size:15px}
.materialSwatches{gap:7px}
.materialSwatch .swatch{
  height:48px;
  border-radius:9px;
}
.materialSwatch.active .swatch{
  outline:2px solid #111;
  outline-offset:2px;
}
.materialBoardPreview{
  height:112px;
  border-radius:11px;
}
.specCard{
  padding:16px 16px 18px;
}
.panelHead h2{font-size:17px}
.result p{
  min-height:34px;
  padding:8px 0;
}
.result p:first-of-type{
  margin:4px -4px 8px;
  padding:13px 10px;
  border:0;
  border-radius:10px;
  background:#f4f5f5;
}
.result p:first-of-type b{
  font-size:15px;
  letter-spacing:-.3px;
}
.result h3{
  margin-top:20px;
}

/* Collapse controls become floating hardware */
.panelToggle{
  top:10px;
  width:30px;height:30px;
  border-radius:10px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 20px rgba(0,0,0,.06);
}
.leftToggle{right:8px}.rightToggle{left:8px}

body.leftCollapsed main{grid-template-columns:44px minmax(0,1fr) 390px}
body.rightCollapsed main{grid-template-columns:352px minmax(0,1fr) 44px}
body.leftCollapsed.rightCollapsed main{grid-template-columns:44px minmax(0,1fr) 44px}
body.leftCollapsed .settingsPanel,
body.rightCollapsed .result{
  background:rgba(255,255,255,.65);
  border-radius:14px;
}

/* Responsive */
@media(max-width:1400px){
  main{grid-template-columns:312px minmax(0,1fr) 342px;gap:10px;padding:10px}
  .appHeader{grid-template-columns:280px 1fr auto}
  .topNav a{min-width:82px}
  body.leftCollapsed main{grid-template-columns:44px minmax(0,1fr) 342px}
  body.rightCollapsed main{grid-template-columns:312px minmax(0,1fr) 44px}
}

/* Warehouse integration */
.warehouseCard{
  margin-top:16px;padding:12px;border:1px solid #e0e3e4;border-radius:12px;background:#f7f8f8;
}
.warehouseHead{display:flex;align-items:center;justify-content:space-between;gap:12px}
.warehouseHead strong{display:block;margin-top:3px;font-size:10px}
.warehouseEyebrow{font-size:7px;letter-spacing:1.15px;color:#9aa0a3;font-weight:700}
.switch{margin:0!important}
.switch input{position:absolute;opacity:0;pointer-events:none}
.switch span{display:block;width:36px;height:22px;border-radius:999px;background:#d8dcdd;position:relative;transition:.16s}
.switch span:after{content:"";position:absolute;left:3px;top:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.15);transition:.16s}
.switch input:checked+span{background:#111314}
.switch input:checked+span:after{transform:translateX(14px)}
.warehouseStatus{margin-top:8px;color:#959b9e;font-size:8px;line-height:1.4}
.warehouseLengths{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:9px}
.warehouseLengths span{padding:8px 7px;border-radius:8px;background:#fff;border:1px solid #e5e7e8}
.warehouseLengths span.ok{box-shadow:inset 0 0 0 1px rgba(33,145,92,.05)}
.warehouseLengths span.zero{opacity:.45}
.warehouseLengths b{display:block;font-size:9px}
.warehouseLengths small{margin:2px 0 0;font-size:7.5px}
.stockCheck{padding:10px;border-radius:9px;background:#f4f5f5;color:#7a8084;font-size:8.5px;line-height:1.45}
.stockCheck strong,.stockCheck span,.stockCheck small{display:block}
.stockCheck strong{font-size:9.5px;color:#22272a;margin-bottom:3px}
.stockCheck.good{background:#eef8f2;color:#4d725d}
.stockCheck.good strong{color:#1f5f3c}
.stockCheck.bad{background:#fff1ef;color:#8a574d}
.stockCheck.bad strong{color:#8a382a}

/* Calculation diagnostics */
.algorithmDiagnostics{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.diagRow{padding:9px 10px;border:1px solid #e8eaea;border-radius:9px;background:#f8f9f9}
.diagRow strong{display:block;margin-bottom:3px;color:#24282a;font-size:8.5px}
.diagRow span{display:block;color:#777d80;font-size:8px;line-height:1.45}
.rowPlan b{font-variant-numeric:tabular-nums}

/* Project zones */
.zoneOutline{
  position:absolute;
  z-index:15;
  pointer-events:none;
  border:1px dashed rgba(14,18,20,.28);
  background:transparent;
}
.zoneOutline span{
  position:absolute;
  left:7px;
  top:7px;
  padding:3px 6px;
  border:1px solid rgba(222,225,226,.95);
  border-radius:5px;
  background:rgba(255,255,255,.9);
  color:#747a7d;
  font-size:7px;
  font-weight:600;
  letter-spacing:.02em;
  white-space:nowrap;
  backdrop-filter:blur(8px);
}
.zoneOutline.zone-porch{
  border-color:rgba(173,91,45,.55);
}
.zoneOutline.zone-porch span{
  color:#9d542e;
}

/* Angled perimeter 80×80 support belt rendered inside polygon SVG */
.perimeterSupportSvg{
  stroke:var(--belt);
  stroke-width:10;
  stroke-linecap:square;
  stroke-linejoin:miter;
  vector-effect:non-scaling-stroke;
  opacity:.92;
  pointer-events:none;
}
.polygonFill{
  stroke:#202527;
  stroke-width:2.2;
  vector-effect:non-scaling-stroke;
}

/* =========================================================
   NIMTECH CAD — constructor drawing visual language
   Based on real working schemes: restrained, technical,
   high-contrast hierarchy of construction layers.
   ========================================================= */

:root{
  --board:#b79a86;
  --joist:#637f91;
  --belt:#c87558;
  --pile:#8c9397;
  --cad-contour:#22272a;
  --cad-paper:#ffffff;
  --cad-grid-major:rgba(91,103,111,.085);
  --cad-grid-minor:rgba(91,103,111,.032);
}

/* Paper / grid */
.canvasViewport{
  background-color:var(--cad-paper)!important;
  background-image:
    linear-gradient(var(--cad-grid-major) 1px,transparent 1px),
    linear-gradient(90deg,var(--cad-grid-major) 1px,transparent 1px),
    linear-gradient(var(--cad-grid-minor) 1px,transparent 1px),
    linear-gradient(90deg,var(--cad-grid-minor) 1px,transparent 1px)!important;
  box-shadow:
    inset 0 0 0 1px #dfe2e3,
    0 12px 28px rgba(18,22,24,.035)!important;
}
.canvasViewport:after{display:none!important}
#terrace,
#terrace.freeShape{
  background:transparent!important;
  box-shadow:none!important;
}

/* Board rows — thin warm working lines */
.boardPiece{
  z-index:0!important;
  background:transparent!important;
  border:0!important;
  box-shadow:inset 0 -1px 0 rgba(166,132,108,.62)!important;
  opacity:.78;
}
.boardPiece.alt{
  background:transparent!important;
}

/* 40×40×2 — blue-grey, same style everywhere incl. double joist */
.joistLine,
.joistLine.double{
  z-index:4!important;
  background:#627f91!important;
  opacity:.92!important;
  box-shadow:none!important;
}

/* 80×80×2 — warm terracotta structural line */
.beltLine{
  z-index:3!important;
  background:#c87558!important;
  opacity:.96!important;
  box-shadow:none!important;
}
.perimeterSupportSvg{
  stroke:#c87558!important;
  stroke-width:6!important;
  stroke-linecap:butt!important;
  stroke-linejoin:miter!important;
  opacity:.98!important;
  vector-effect:non-scaling-stroke;
}

/* Piles — full grey engineering points */
.pileDot{
  z-index:7!important;
  width:7px!important;
  height:7px!important;
  border:1.5px solid #fff!important;
  border-radius:50%!important;
  background:#899196!important;
  box-shadow:0 0 0 1px #899196!important;
  transform:translate(-50%,-50%)!important;
}

/* Main contour — strict black technical outline */
.polygonFill{
  fill:rgba(255,255,255,.001)!important;
  stroke:var(--cad-contour)!important;
  stroke-width:2!important;
  vector-effect:non-scaling-stroke;
}
.openPolyline{
  fill:none!important;
  stroke:var(--cad-contour)!important;
  stroke-width:2!important;
  vector-effect:non-scaling-stroke;
}

/* Dimensions — like working construction sheets */
.edgeLabelBg{
  fill:#fff!important;
  stroke:#d9dddf!important;
  stroke-width:1!important;
  opacity:.98!important;
}
.edgeLabel{
  fill:#202426!important;
  stroke:#fff!important;
  stroke-width:4px!important;
  paint-order:stroke!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
  letter-spacing:0!important;
}
.engineeringDimension{
  color:#202426!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:700!important;
}
.engineeringDimension.x,
.engineeringDimension.y{
  border-color:#555d61!important;
}
.engineeringDimension.x:before,
.engineeringDimension.x:after,
.engineeringDimension.y:before,
.engineeringDimension.y:after{
  background:#555d61!important;
}
.engineeringDimension.x span,
.engineeringDimension.y span{
  background:#fff!important;
  border:0!important;
  border-radius:2px!important;
  box-shadow:none!important;
  color:#202426!important;
}

/* Editing points remain functional but visually secondary */
.vertexHandle{
  fill:#fff!important;
  stroke:#ba6843!important;
  stroke-width:1.5!important;
  filter:none!important;
}
.vertexHandle:hover{
  fill:#fff8f3!important;
  stroke:#a95633!important;
}
.addHandle{
  fill:#fff!important;
  stroke:#ba6843!important;
  stroke-width:1.5!important;
  filter:none!important;
}

/* Zones: subdued drafting notation */
.zoneOutline{
  border:1px dashed rgba(55,63,67,.18)!important;
}
.zoneOutline span{
  border:0!important;
  background:rgba(255,255,255,.88)!important;
  color:#777f83!important;
  box-shadow:none!important;
}
.zoneOutline.zone-porch{
  border-color:rgba(200,117,88,.3)!important;
}

/* Legend must exactly match the drawing */
.boardKey,.boardLayer .layerSwatch{background:#b79a86!important}
.regularJoistKey,.joistLayer .layerSwatch{background:#627f91!important}
.beltKey,.beltLayer .layerSwatch{background:#c87558!important}
.pileKey,.pileLayer .layerSwatch{background:#899196!important}

/* Constructor drawing palette — exact working-scheme convention */
:root{
  --board:#9b6b50;
  --joist:#4f7187;
  --belt:#d04d43;
  --pile:#d58b96;
}

/* DPK layout: thin brown lines */
.boardPiece{
  background:transparent!important;
  border:0!important;
  box-shadow:inset 0 -1px 0 #9b6b50!important;
  opacity:.78!important;
}

/* 40×40×2: thin blue lines */
.joistLine,
.joistLine.double{
  background:#4f7187!important;
  opacity:.9!important;
  box-shadow:none!important;
}
.joistLine{
  width:2px;
}

/* 80×80×2: thin red lines */
.beltLine{
  background:#d04d43!important;
  opacity:.95!important;
  box-shadow:none!important;
}
.perimeterSupportSvg,
.angledSupportBelt{
  stroke:#d04d43!important;
  stroke-width:2!important;
  opacity:.95!important;
}

/* Piles: hollow pink circles */
.pileDot{
  width:10px!important;
  height:10px!important;
  background:#fff!important;
  border:2px solid #d58b96!important;
  border-radius:50%!important;
  box-shadow:none!important;
  transform:translate(-50%,-50%)!important;
}

/* Legend mirrors drawing */
.boardKey,.boardLayer .layerSwatch{background:#9b6b50!important}
.regularJoistKey,.joistLayer .layerSwatch{background:#4f7187!important}
.beltKey,.beltLayer .layerSwatch{background:#d04d43!important}
.pileKey,.pileLayer .layerSwatch{
  background:#fff!important;
  border:2px solid #d58b96!important;
  border-radius:50%!important;
}

/* =========================================================
   CAD zoom normalization — Pro-Digital-like visual weight
   Geometry scales; strokes and symbols stay screen-constant.
   ========================================================= */

.canvasScene{
  --cad-inv-scale:1;
  --cad-board-stroke:1px;
  --cad-joist-stroke:1.15px;
  --cad-belt-stroke:1.35px;
  --cad-pile-size:6px;
  --cad-pile-border:1.25px;
}

/* Geometry divs carry length only; pseudo-element carries visual stroke. */
.joistLine,
.beltLine{
  background:transparent!important;
  opacity:1!important;
  overflow:visible!important;
}

.joistLine.cad-h::after,
.joistLine.cad-v::after,
.beltLine.cad-h::after,
.beltLine.cad-v::after,
.cad-angled::after{
  content:"";
  position:absolute;
  pointer-events:none;
  transform-origin:center;
}

.joistLine.cad-h::after{
  left:0;right:0;top:50%;
  height:calc(var(--cad-joist-stroke) * var(--cad-inv-scale));
  transform:translateY(-50%);
  background:#4f7187;
}
.joistLine.cad-v::after{
  top:0;bottom:0;left:50%;
  width:calc(var(--cad-joist-stroke) * var(--cad-inv-scale));
  transform:translateX(-50%);
  background:#4f7187;
}

.beltLine.cad-h::after{
  left:0;right:0;top:50%;
  height:calc(var(--cad-belt-stroke) * var(--cad-inv-scale));
  transform:translateY(-50%);
  background:#d04d43;
}
.beltLine.cad-v::after{
  top:0;bottom:0;left:50%;
  width:calc(var(--cad-belt-stroke) * var(--cad-inv-scale));
  transform:translateX(-50%);
  background:#d04d43;
}

.cad-angled::after{
  left:0;right:0;top:50%;
  height:calc(var(--cad-belt-stroke) * var(--cad-inv-scale));
  transform:translateY(-50%);
  background:#d04d43;
}

/* Piles remain delicate hollow markers independent of zoom. */
.pileDot{
  width:calc(var(--cad-pile-size) * var(--cad-inv-scale))!important;
  height:calc(var(--cad-pile-size) * var(--cad-inv-scale))!important;
  border-width:calc(var(--cad-pile-border) * var(--cad-inv-scale))!important;
  background:#fff!important;
  border-color:#d98d99!important;
  box-shadow:none!important;
}

/* Board layout stays visually quieter than structure. */
.boardPiece{
  opacity:.58!important;
  box-shadow:inset 0 calc(-1px * var(--cad-inv-scale)) 0 #9b6b50!important;
}

/* SVG construction stroke remains constant by definition. */
.perimeterSupportSvg{
  stroke-width:1.35!important;
  vector-effect:non-scaling-stroke!important;
}

/* Make editable contour and dimensions lighter at high zoom. */
.polygonFill,.openPolyline{
  stroke-width:1.45!important;
  vector-effect:non-scaling-stroke!important;
}
.edgeLabel{
  font-weight:600!important;
}

/* Dimension labels may extend outside the terrace geometry */
#terrace.freeShape{
  overflow:visible!important;
}
#terrace.freeShape .constructionLayer{
  overflow:hidden!important;
}
#terrace.freeShape .polygonEditor{
  overflow:visible!important;
  pointer-events:auto;
}
.edgeLabelBg,
.edgeLabel{
  pointer-events:auto;
}

/* Board rendering must follow board direction */
.boardPiece{
  box-shadow:none!important;
  background:transparent!important;
  overflow:visible!important;
  opacity:.62!important;
}
.boardPiece::after{
  content:"";
  position:absolute;
  pointer-events:none;
  background:#9b6b50;
}
.boardPiece.board-h::after{
  left:0;right:0;top:50%;
  height:calc(var(--cad-board-stroke) * var(--cad-inv-scale));
  transform:translateY(-50%);
}
.boardPiece.board-v::after{
  top:0;bottom:0;left:50%;
  width:calc(var(--cad-board-stroke) * var(--cad-inv-scale));
  transform:translateX(-50%);
}

/* Visible DPK seam ticks, not structural members */
.boardJoint{
  position:absolute;
  z-index:2;
  pointer-events:none;
  background:#9b6b50;
  opacity:.8;
}
.boardJoint.joint-v{
  width:calc(1.25px * var(--cad-inv-scale));
  transform:translateX(-50%);
}
.boardJoint.joint-h{
  height:calc(1.25px * var(--cad-inv-scale));
  transform:translateY(-50%);
}

/* Mandatory joists under DPK joints: same blue, slightly more legible */
.joistLine.double.cad-h::after{
  height:calc(1.7px * var(--cad-inv-scale));
  background:#4f7187;
}
.joistLine.double.cad-v::after{
  width:calc(1.7px * var(--cad-inv-scale));
  background:#4f7187;
}

/* DPK physical board surface — brown fill, 20% opacity */
.boardPiece{
  background:rgba(139,93,65,.20)!important;
  opacity:1!important;
}
.boardPiece::after{
  background:#956447!important;
  opacity:.72;
}
/* 3 mm gaps are represented geometrically by spacing between boardPiece elements. */

/* =========================================================
   DPK board visual — physical plank, not centerline diagram
   Each cut piece is a translucent brown rectangle with its
   own darker perimeter. The 3 mm joint is the real empty gap.
   ========================================================= */
.boardPiece{
  box-sizing:border-box!important;
  background:rgba(139,93,65,.20)!important;
  border:calc(.9px * var(--cad-inv-scale)) solid rgba(125,79,53,.72)!important;
  opacity:1!important;
  box-shadow:none!important;
}
.boardPiece::after{
  display:none!important;
}
.boardJoint{
  display:none!important;
}

.boardStockLengthSelect{
  width:100%;
  min-height:52px;
  border:1px solid #d9ddde;
  border-radius:14px;
  background:#fff;
  padding:0 16px;
  font-size:14px;
  font-weight:600;
  color:#202426;
  outline:none;
}
.boardStockLengthSelect:focus{
  border-color:#b8bec1;
  box-shadow:0 0 0 3px rgba(24,28,30,.04);
}

/* WPC piece joints: calculation keeps 3 mm, visual uses outlined adjoining pieces */
.boardPiece{
  background:rgba(139,93,65,.20)!important;
  border:calc(.85px * var(--cad-inv-scale)) solid rgba(118,73,49,.72)!important;
  box-sizing:border-box!important;
}

/* All physical WPC pieces must look identical.
   Reused offcuts affect inventory only, never drawing appearance. */
.boardPiece.alt,
.boardPiece.alt.board-h,
.boardPiece.alt.board-v{
  background:rgba(139,93,65,.20)!important;
  border:calc(.85px * var(--cad-inv-scale)) solid rgba(118,73,49,.72)!important;
  opacity:1!important;
  box-shadow:none!important;
}

/* =========================================================
   Clean configurator drawing language
   White workspace, filled decking, labelled vertices/sides.
   ========================================================= */
.canvasViewport{
  background:#fff!important;
  background-image:none!important;
  box-shadow:inset 0 0 0 1px #e3e7e9,0 16px 40px rgba(15,18,20,.035)!important;
}
.constructionLayer,
#terrace.freeShape .constructionLayer{
  background:#fff!important;
}

/* Decking reads as a physical surface while structure remains visible. */
.boardPiece,
.boardPiece.alt,
.boardPiece.alt.board-h,
.boardPiece.alt.board-v{
  background:rgba(151,96,55,.34)!important;
  border:calc(.75px * var(--cad-inv-scale)) solid rgba(111,68,40,.64)!important;
}

/* Polygon contour is crisp and secondary to editable blue geometry labels. */
.polygonFill,
.openPolyline{
  stroke:#22292d!important;
  stroke-width:1.35!important;
}

/* Vertex markers A, B, C... */
.vertexHandle{
  fill:#2f8fca!important;
  stroke:#fff!important;
  stroke-width:1.4!important;
  filter:none!important;
}
.vertexHandle:hover{
  fill:#247fb8!important;
  stroke:#fff!important;
}
.vertexLabel{
  fill:#fff;
  font-family:Arial,Helvetica,sans-serif;
  font-weight:700;
  pointer-events:none;
  user-select:none;
}

/* Side badges A-B 6200 мм */
.edgeLabelBg{
  fill:#fff!important;
  stroke:#2f8fca!important;
  stroke-width:1.25!important;
  opacity:1!important;
}
.edgeLabel{
  fill:#197bb8!important;
  stroke:none!important;
  paint-order:normal!important;
  font-family:Arial,Helvetica,sans-serif!important;
  font-weight:650!important;
  letter-spacing:0!important;
  cursor:pointer;
}

/* Rectangle uses same A-B / B-C / C-D / D-A language as polygon mode */
.rectSideLabel{
  position:absolute;
  z-index:30;
  padding:3px 8px;
  border:1.25px solid #2f8fca;
  border-radius:5px;
  background:#fff;
  color:#197bb8;
  font-size:12px;
  line-height:1.1;
  font-weight:650;
  white-space:nowrap;
  pointer-events:none;
}
.rectSideLabel.top{left:50%;top:-14px;transform:translate(-50%,-100%)}
.rectSideLabel.bottom{left:50%;bottom:-14px;transform:translate(-50%,100%)}
.rectSideLabel.left{left:-14px;top:50%;transform:translate(-100%,-50%) rotate(-90deg)}
.rectSideLabel.right{right:-14px;top:50%;transform:translate(100%,-50%) rotate(90deg)}
.rectVertexLabel{
  position:absolute;
  z-index:31;
  width:24px;
  height:24px;
  border-radius:50%;
  background:#2f8fca;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:12px;
  font-weight:700;
  line-height:1;
  box-shadow:0 0 0 2px #fff;
  pointer-events:none;
}
.rectVertexLabel.a{left:0;top:0;transform:translate(-50%,-50%)}
.rectVertexLabel.b{right:0;top:0;transform:translate(50%,-50%)}
.rectVertexLabel.c{right:0;bottom:0;transform:translate(50%,50%)}
.rectVertexLabel.d{left:0;bottom:0;transform:translate(-50%,50%)}

/* Fullscreen drawing workspace */
.workspace:fullscreen{
  width:100vw;
  height:100vh;
  max-width:none;
  padding:18px 22px 16px;
  background:#eef0f1;
  display:flex;
  flex-direction:column;
  box-sizing:border-box;
}
.workspace:fullscreen .workspaceTop{flex:0 0 auto}
.workspace:fullscreen .canvasWrap{
  flex:1 1 auto;
  min-height:0;
  height:auto;
}
.workspace:fullscreen .canvasViewport{
  min-height:0;
  height:100%;
}
.workspace:fullscreen .canvasToolbar{z-index:80}
.workspace:fullscreen .canvasFooter{z-index:70}
#zoomFit.active{background:#111;color:#fff}
#zoomFit.active svg{stroke:#fff}

/* Concrete base: 40×40 welded grid and distributed supports */
.joistLine.concreteTie.cad-h::after,
.joistLine.concreteTie.cad-v::after{
  background:#4f7187!important;
  opacity:.82;
}
.concreteSupportDot{
  position:absolute;
  z-index:6;
  width:calc(6px * var(--cad-inv-scale));
  height:calc(6px * var(--cad-inv-scale));
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:calc(1.1px * var(--cad-inv-scale)) solid #8a9297;
  background:rgba(255,255,255,.92);
  pointer-events:none;
}

/* Concrete support symbols */
.concreteSupportDot{
  box-sizing:border-box;
}
.concreteSupportDot.support-rubber{
  width:calc(8px * var(--cad-inv-scale));
  height:calc(8px * var(--cad-inv-scale));
  border-radius:1px;
  border:calc(1px * var(--cad-inv-scale)) solid #6f7478;
  background:rgba(86,91,94,.28);
}
.concreteSupportDot.support-rebar{
  width:calc(9px * var(--cad-inv-scale));
  height:calc(9px * var(--cad-inv-scale));
  border:0;
  border-radius:50%;
  background:transparent;
}
.concreteSupportDot.support-rebar::before,
.concreteSupportDot.support-rebar::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:calc(10px * var(--cad-inv-scale));
  height:calc(1.25px * var(--cad-inv-scale));
  background:#596166;
  transform-origin:center;
}
.concreteSupportDot.support-rebar::before{transform:translate(-50%,-50%) rotate(45deg)}
.concreteSupportDot.support-rebar::after{transform:translate(-50%,-50%) rotate(-45deg)}
.concreteSupportDot.support-plastic{
  width:calc(10px * var(--cad-inv-scale));
  height:calc(10px * var(--cad-inv-scale));
  border-radius:50%;
  border:calc(1.2px * var(--cad-inv-scale)) solid #58636a;
  background:#fff;
  box-shadow:inset 0 0 0 calc(2px * var(--cad-inv-scale)) #fff;
}
.concreteSupportDot.support-plastic::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  width:calc(3px * var(--cad-inv-scale));
  height:calc(3px * var(--cad-inv-scale));
  border-radius:50%;
  background:#58636a;
  transform:translate(-50%,-50%);
}

/* Board nomenclature selector */
.productChoiceGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:10px;
  margin:8px 0 14px;
}
.productChoice{
  position:relative;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  min-height:88px;
  padding:10px;
  border:1px solid #dfe3e5;
  border-radius:16px;
  background:#fff;
  cursor:pointer;
  transition:border-color .18s ease,box-shadow .18s ease,background .18s ease;
}
.productChoice:hover{
  border-color:#c7cccf;
}
.productChoice.active{
  border-color:#171a1c;
  box-shadow:0 0 0 1px #171a1c;
  background:#fbfbfb;
}
.productChoice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}
.productChoiceImage{
  width:76px;
  height:64px;
  border-radius:10px;
  border:1px solid #e0e3e5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:#f3f4f4;
  color:#9aa1a5;
  font-size:10px;
  line-height:1.15;
  text-align:center;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.productChoiceImage img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.productChoiceImage.customIcon{
  font-size:28px;
  font-weight:300;
  color:#5e666b;
}
.productChoiceText{
  display:flex;
  flex-direction:column;
  gap:4px;
}
.productChoiceText strong{
  font-size:14px;
  font-weight:650;
  color:#171a1c;
}
.productChoiceText small{
  color:#8d9498;
  font-size:12px;
}

/* Profile outlines use their physical 40/80 mm widths, including workspace zoom. */
.joistLine.cad-h::after,.beltLine.cad-h::after,.cad-angled::after{
 height:var(--profile-plan-width)!important;
}
.joistLine.cad-v::after,.beltLine.cad-v::after{
 width:var(--profile-plan-width)!important;
}
.joistLine.double.cad-h::after{
 background:linear-gradient(to bottom,#4f7187 0, #4f7187 calc(50% - var(--profile-center-line)/2),#fff calc(50% - var(--profile-center-line)/2),#fff calc(50% + var(--profile-center-line)/2),#4f7187 calc(50% + var(--profile-center-line)/2))!important;
}
.joistLine.double.cad-v::after{
 background:linear-gradient(to right,#4f7187 0, #4f7187 calc(50% - var(--profile-center-line)/2),#fff calc(50% - var(--profile-center-line)/2),#fff calc(50% + var(--profile-center-line)/2),#4f7187 calc(50% + var(--profile-center-line)/2))!important;
}

/* KRONEX roof support footprint, scaled with the terrace rather than screen pixels. */
.concreteSupportDot.support-plastic.roofSupportDot{
 width:var(--roof-base-width)!important;
 height:var(--roof-base-height)!important;
 padding:0!important;border:0!important;background:transparent!important;
 box-shadow:none!important;border-radius:0!important;
 transform:translate(-50%,-50%)!important;
 z-index:2!important;opacity:1!important;
}
.roofSupportDot::before,.concreteSupportDot.support-plastic.roofSupportDot::after{content:none!important;display:none!important;}
.roofSupportDot svg{display:block;overflow:visible;}