:root{font-family:Inter,system-ui,Arial,sans-serif;color:#17202a;background:#eef1f4}*{box-sizing:border-box}body{margin:0}header{height:64px;background:#18212b;color:white;display:flex;align-items:center;justify-content:space-between;padding:0 22px;gap:20px}header strong{font-size:20px}header span{margin-left:10px;font-size:12px;opacity:.6}nav{display:flex;gap:8px}button{border:0;border-radius:7px;padding:10px 14px;cursor:pointer}nav button{background:#273543;color:#dfe8ef}nav button.active{background:white;color:#17202a}main{display:grid;grid-template-columns:300px 1fr;min-height:calc(100vh - 64px)}aside{background:white;border-right:1px solid #d7dde2;padding:20px}.group{margin-bottom:22px}.group h3{font-size:13px;text-transform:uppercase;letter-spacing:.08em;color:#65717c}.field{margin:10px 0}.field label{display:block;font-size:12px;margin-bottom:5px;color:#53606b}.field input{width:100%;padding:9px;border:1px solid #c9d0d6;border-radius:6px}.summary{font-size:13px;line-height:1.6;background:#f4f6f8;padding:12px;border-radius:8px}#workspace{padding:24px;overflow:auto}.panel{background:white;border-radius:10px;padding:20px;min-height:600px;box-shadow:0 1px 3px #00000012}.title-row{display:flex;justify-content:space-between;align-items:end;margin-bottom:15px}.title-row h2{margin:0}.muted{color:#697680;font-size:13px}.canvas-wrap{position:relative;background:#f7f8f9;border:1px solid #dce1e5;border-radius:8px;padding:55px;min-height:500px;display:flex;align-items:center;justify-content:center}.floor{position:relative;background:#ddd;border:3px solid #20272d;box-shadow:0 2px 8px #0002}.tile{position:absolute;background:#f8f5ed;border:1px solid #9da5aa;display:flex;align-items:center;justify-content:center;font-size:9px;color:#4b5358;overflow:hidden}.dir{position:absolute;font-weight:700;color:#56616a}.north{top:18px;left:50%}.south{bottom:18px;left:50%}.west{left:18px;top:50%}.east{right:18px;top:50%}@media(max-width:800px){main{grid-template-columns:1fr}aside{border-right:0;border-bottom:1px solid #d7dde2}header{height:auto;padding:12px;flex-wrap:wrap}#workspace{padding:10px}.canvas-wrap{padding:45px 35px}}
.setout-label{display:block;font-size:12px;color:#53606b;margin:12px 0 6px}.segmented{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin-bottom:10px}.segmented button{padding:8px 4px;font-size:11px;background:#edf1f4;color:#45515b;border:1px solid #d7dde2}.segmented button.active{background:#263746;color:#fff;border-color:#263746}.setout-summary{margin-top:12px}

.floor-work{display:grid;grid-template-columns:minmax(0,1fr) 230px;gap:16px;align-items:stretch}
.results-panel{background:#f4f6f8;border:1px solid #dce1e5;border-radius:8px;padding:16px}
.results-panel h3{margin:0 0 14px;font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:#65717c}
.result-grid{display:grid;gap:10px}.result-grid>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #dce1e5;padding-bottom:8px}
.result-grid span{font-size:12px;color:#65717c}.result-grid b{font-size:13px;text-align:right}
.status{margin-top:16px;padding:10px;border-radius:7px;background:#e7ecef;font-size:12px}.status.warn{background:#fff0c9}
.lock-btn,.revert-btn{width:100%;margin-bottom:7px;border:1px solid #ccd4da}.lock-btn.locked{background:#263746;color:white}.lock-btn.unlocked{background:#fff0c9;color:#382d0b}.revert-btn{background:#edf1f4;color:#45515b}.revert-btn:disabled{opacity:.45;cursor:not-allowed}
.drag-help{font-size:11px;line-height:1.4;color:#697680;margin-top:4px}.floor.draggable{cursor:grab;touch-action:none}.floor.draggable:active{cursor:grabbing}
@media(max-width:1050px){.floor-work{grid-template-columns:1fr}.results-panel{display:block}.result-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.wall-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.wall-picker button{background:#edf1f4;color:#45515b;border:1px solid #d7dde2}.wall-picker button.active{background:#263746;color:#fff}.wall-canvas .north,.wall-canvas .south{font-size:11px}.wall-canvas .west,.wall-canvas .east{font-size:11px}
.surface-picker{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}.surface-picker button:first-child{grid-column:1/-1}.surface-picker button{background:#edf1f4;color:#45515b;border:1px solid #d7dde2}.surface-picker button.active{background:#263746;color:#fff;border-color:#263746}.follow-btn{width:100%;background:#e8eef2;color:#263746;border:1px solid #cbd5dc;font-weight:700}.floor-link-note{margin-top:14px;padding:10px;border-radius:7px;background:#eaf2f6;font-size:12px;line-height:1.45}

.opening-control{border:1px solid #d7dde2;border-radius:8px;margin:8px 0;overflow:hidden}.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;font-size:13px;font-weight:700;background:#f4f6f8}.toggle-row input{width:18px;height:18px}.opening-fields{padding:4px 12px 8px}.opening{position:absolute;z-index:5;border:3px solid #34434f;background:rgba(225,231,235,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;overflow:hidden;pointer-events:none}.opening span{font-size:9px}.opening-window{background:rgba(205,225,235,.9)}.opening-niche{background:rgba(222,216,203,.92);border-style:double}.opening-door{background:rgba(218,218,218,.94)}

/* Bathroom floor plan wall perimeter */
.floor.plan-floor{outline:2px solid #20272d;outline-offset:5px}
.plan-opening{position:absolute;z-index:8;background:#f7f8f9;pointer-events:none}
.plan-opening::before,.plan-opening::after{content:"";position:absolute;background:#20272d}
.plan-north,.plan-south{height:13px}
.plan-north{top:-10px}.plan-south{bottom:-10px}
.plan-north::before,.plan-north::after,.plan-south::before,.plan-south::after{width:2px;height:15px;top:-1px}
.plan-north::before,.plan-south::before{left:0}.plan-north::after,.plan-south::after{right:0}
.plan-west,.plan-east{width:13px}
.plan-west{left:-10px}.plan-east{right:-10px}
.plan-west::before,.plan-west::after,.plan-east::before,.plan-east::after{height:2px;width:15px;left:-1px}
.plan-west::before,.plan-east::before{bottom:0}.plan-west::after,.plan-east::after{top:0}
.plan-window{background:rgba(190,220,235,.95)}
.plan-door{background:#f7f8f9}

.pattern-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}.pattern-grid button{background:#edf1f4;border:1px solid #d7dde2}.pattern-grid button.active{background:#263746;color:#fff}.zoom-row{display:grid;grid-template-columns:40px 1fr 40px 65px;gap:5px;align-items:center}.zoom-row span{text-align:center;font-size:12px;font-weight:700}.zoom-row button{padding:8px 5px;background:#edf1f4;border:1px solid #d7dde2}.floor{overflow:hidden}.pattern-tile{transform-origin:center center}

[hidden]{display:none!important}
.home-screen{min-height:100vh;background:#eef1f4;padding:42px 24px}
.home-shell{max-width:1080px;margin:0 auto}
.home-brand{display:flex;align-items:center;gap:14px;margin-bottom:28px}
.brand-mark{width:48px;height:48px;border-radius:12px;background:#18212b;color:white;display:grid;place-items:center;font-weight:800;letter-spacing:.04em}
.home-brand h1{margin:0;font-size:24px}.home-brand p{margin:3px 0 0;color:#697680;font-size:13px}
.project-card{background:white;border:1px solid #d7dde2;border-radius:14px;padding:24px;box-shadow:0 2px 8px #0000000d}
.home-heading{display:flex;justify-content:space-between;align-items:start;gap:20px;margin-bottom:18px}
.home-heading h2,.workflow-heading h2{margin:4px 0 0;font-size:22px}.eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;color:#74818b}.version{font-size:12px;color:#7a858e}
.project-fields{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.project-fields label{font-size:12px;color:#53606b}.project-fields input,.project-fields textarea{display:block;width:100%;margin-top:6px;padding:11px;border:1px solid #c9d0d6;border-radius:7px;font:inherit;color:#17202a;resize:vertical}
.notes-field{grid-column:1/-1}
.workflow-heading{margin:30px 0 14px}
.workflow-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.workflow-card{text-align:left;background:white;border:1px solid #d7dde2;border-radius:14px;padding:22px;min-height:190px;display:flex;flex-direction:column;align-items:flex-start;box-shadow:0 1px 3px #0000000a;transition:.15s}
.workflow-card:hover{transform:translateY(-2px);border-color:#9caab4;box-shadow:0 5px 15px #00000010}.workflow-card.primary{border-top:4px solid #263746}
.workflow-icon{font-size:29px;margin-bottom:18px;color:#40515e}.workflow-card strong{font-size:18px}.workflow-card small{font-size:13px;line-height:1.5;color:#697680;margin:8px 0 22px}.card-action{margin-top:auto;font-size:12px;font-weight:800;color:#263746}
.home-footnote{text-align:center;color:#7a858e;font-size:12px;margin-top:24px}
.brand-button{background:transparent;color:white;padding:0;text-align:left}.brand-button strong{font-size:20px}.brand-button span{margin-left:10px;font-size:12px;opacity:.6}
.project-title{color:#dfe8ef;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px}
@media(max-width:800px){.home-screen{padding:24px 14px}.project-fields,.workflow-cards{grid-template-columns:1fr}.notes-field{grid-column:auto}.workflow-card{min-height:150px}.project-title{order:3;width:100%;max-width:none}header{align-items:center}}

/* ===== V0.43 responsive workspace redesign ===== */
.app-shell{height:100vh;display:flex;flex-direction:column;overflow:hidden}
.app-shell header{flex:0 0 auto}
.app-shell main{
  flex:1 1 auto;min-height:0;
  display:grid;grid-template-columns:260px minmax(0,1fr);
  gap:0;background:#e9edf0;overflow:hidden;
}
#controls{
  width:auto;min-width:0;height:100%;overflow-y:auto;
  background:#f7f8f9;border-right:1px solid #ccd3d8;
  padding:12px;
}
#workspace{
  min-width:0;min-height:0;height:100%;overflow:auto;
  padding:14px;
}

/* Make the existing control UI materially denser without changing its logic. */
#controls h2{font-size:17px;margin:4px 0 10px}
#controls h3{font-size:12px;margin:14px 0 7px;padding-top:10px;border-top:1px solid #dce1e5;text-transform:uppercase;letter-spacing:.05em;color:#5e6b75}
#controls label{font-size:11px;margin:5px 0}
#controls input,#controls select{
  min-height:30px;padding:5px 7px;font-size:12px;
}
#controls button{
  min-height:31px;padding:6px 8px;font-size:11px;
}
#controls .row{gap:5px}
#controls p{font-size:11px;margin:6px 0}

/* Pattern / set-out buttons remain easy to hit despite compact numeric inputs. */
#controls button[data-pattern],
#controls button[data-h],
#controls button[data-v]{
  min-height:35px;
}

/* Drawing area is the visual priority. */
#workspace .floor-work{
  width:100%;max-width:none;
  align-items:start;
}
#workspace .drawing-card,
#workspace .surface-card{
  max-width:none;
}

/* Openings are visually grouped as a tool strip when the existing opening
   controls are rendered. This uses existing markup/classes only. */
#controls .opening{
  background:#fff;border:1px solid #d9dfe3;border-radius:7px;
  padding:7px;margin:6px 0;
}

/* Landscape tablets/desktops: slim side controls, drawing owns the screen. */
@media (orientation:landscape) and (min-width:760px){
  #controls{max-width:260px}
  #workspace{padding:12px 16px}
}

/* Portrait: controls become a compact horizontal/top region and workspace
   gets the remaining vertical area. Existing groups wrap naturally. */
@media (orientation:portrait), (max-width:759px){
  .app-shell{height:auto;min-height:100vh;overflow:visible}
  .app-shell main{
    display:flex;flex-direction:column;overflow:visible;
  }
  #controls{
    width:100%;height:auto;overflow:visible;border-right:0;
    border-bottom:1px solid #ccd3d8;padding:10px 12px;
  }
  #controls .row{display:flex;flex-wrap:wrap}
  #controls input,#controls select{max-width:150px}
  #workspace{
    width:100%;height:auto;min-height:58vh;overflow:auto;padding:12px;
  }
}

/* Larger landscape screens can spare a little more sidebar width. */
@media (orientation:landscape) and (min-width:1200px){
  .app-shell main{grid-template-columns:280px minmax(0,1fr)}
  #controls{max-width:280px}
}

/* ===== V0.44 actual desktop workspace restructure ===== */
@media (min-width:900px){
  .app-shell main.work-layout{
    display:grid!important;
    grid-template-columns:250px minmax(500px,1fr) 250px!important;
    height:calc(100vh - 64px);
    min-height:0;overflow:hidden;
  }
  .left-tools,.right-tools{
    min-width:0;height:100%;overflow-y:auto;overscroll-behavior:contain;
    background:#f7f8f9;padding:10px;border-color:#ccd3d8;
  }
  .left-tools{border-right:1px solid #ccd3d8}
  .right-tools{border-left:1px solid #ccd3d8}
  .centre-stage{min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden}
  .drawing-tools{
    flex:0 0 auto;display:flex;align-items:flex-start;gap:10px;
    padding:8px 12px;background:#f7f8f9;border-bottom:1px solid #ccd3d8;
  }
  .drawing-tools .group{margin:0;padding:0;border:0}
  .drawing-tools h3{font-size:10px;margin:0 0 5px;text-transform:uppercase;letter-spacing:.06em;color:#66737d}
  .drawing-tools .pattern-grid{display:flex;gap:5px}
  .drawing-tools button{min-height:30px;padding:5px 10px;font-size:11px}
  .drawing-tools .zoom-row{display:flex;align-items:center;gap:5px}
  .drawing-tools .zoom-row span{min-width:45px;text-align:center;font-size:12px}
  #workspace{flex:1 1 auto;min-height:0;height:auto!important;overflow:auto;padding:12px}
  #controls{max-width:none!important}
  #controls .group{margin-bottom:8px}
  #controls h3{margin:8px 0 5px;padding-top:7px}
  #controls label{margin:3px 0}
  #controls input{min-height:27px;padding:3px 6px}
  .right-tools .group{margin:0}
  .right-tools h3{margin:3px 0 10px}
  .opening-control{background:#fff;border:1px solid #d9dfe3;border-radius:8px;padding:8px;margin-bottom:8px}
  .opening-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px}
  .opening-fields label{font-size:10px;margin:0}
  .opening-fields input{width:100%;min-width:0;padding:5px}
  .tool-placeholder{color:#77838c;font-size:12px;line-height:1.45}
  .tool-placeholder h3{color:#4e5b65}
}
/* Portrait / narrow: keep controls above drawing and openings below it. */
@media (max-width:899px){
  .app-shell main.work-layout{display:flex!important;flex-direction:column}
  .left-tools{order:1}
  .centre-stage{order:2;display:flex;flex-direction:column}
  .drawing-tools{order:1;display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;background:#f7f8f9;border-bottom:1px solid #ccd3d8}
  #workspace{order:2}
  .right-tools{order:3;padding:10px 12px;background:#f7f8f9;border-top:1px solid #ccd3d8}
}

/* ===== V0.45 requested control placement ===== */
@media (min-width:900px){
  .app-shell main.work-layout{
    display:grid!important;
    grid-template-columns:270px minmax(0,1fr)!important;
    grid-template-rows:minmax(0,1fr);
    height:calc(100vh - 64px);overflow:hidden;
  }
  /* controls + contextual tools share the left rail */
  .left-tools{
    grid-column:1;grid-row:1;
    height:auto;max-height:62%;overflow-y:auto;
    border-right:1px solid #aeb9c1;
    background:#dfe7ec!important;
    padding:10px 10px 6px;
  }
  .right-tools{
    grid-column:1;grid-row:1;
    align-self:end;
    width:270px;max-height:38%;overflow-y:auto;
    border-left:0!important;border-right:1px solid #aeb9c1;border-top:2px solid #9aaab5;
    background:#cbd8e0!important;
    padding:9px 10px;
    z-index:2;
  }
  .right-tools:empty{display:none}
  .centre-stage{
    grid-column:2;grid-row:1;
    min-width:0;min-height:0;display:flex;flex-direction:column;overflow:hidden;
    background:#eef2f4;
  }
  #workspace{
    order:1;flex:1 1 auto;min-height:0;overflow:auto;padding:14px!important;
  }
  .drawing-tools{
    order:2;flex:0 0 auto;
    display:flex!important;gap:12px;align-items:flex-start;
    padding:10px 14px!important;
    background:#cbd8e0!important;
    border-top:2px solid #9aaab5!important;border-bottom:0!important;
  }
  .drawing-tools .group{
    background:#e7edf1;border:1px solid #aebac2;border-radius:8px;
    padding:8px 10px!important;
  }
  #controls .group{
    background:#f4f7f8;border:1px solid #b8c4cb;border-radius:8px;
    padding:7px 8px;margin:0 0 7px!important;
  }
  #controls h3{border-top:0!important;padding-top:0!important;margin:1px 0 6px!important}
  .right-tools .group,.right-tools .opening,.right-tools .opening-control{
    background:#edf2f5!important;border:1px solid #aebac2!important;border-radius:8px;
  }
}
/* Narrow / portrait: drawing followed by Pattern+Zoom, then opening tools. */
@media (max-width:899px){
  .centre-stage #workspace{order:1}
  .centre-stage .drawing-tools{
    order:2;background:#cbd8e0!important;border-top:2px solid #9aaab5!important;
  }
  .left-tools{background:#dfe7ec!important}
  .right-tools{background:#cbd8e0!important;border-top:2px solid #9aaab5!important}
  #controls .group,.drawing-tools .group,.right-tools .group{
    background:#f1f5f7;border:1px solid #b7c3ca;border-radius:8px;padding:8px;
  }
}

/* ===== V0.46: openings directly under the cut-size Current Result panel ===== */
@media (min-width:900px){
 .app-shell main.work-layout{grid-template-columns:250px minmax(0,1fr)!important}
 .left-tools{grid-column:1!important;grid-row:1!important;height:100%!important;max-height:none!important;overflow-y:auto!important}
 .centre-stage{grid-column:2!important;grid-row:1!important}
 #workspace .floor-work{grid-template-columns:minmax(0,1fr) 250px}
 #workspace .results{background:#d7e2e8!important;border:1px solid #9fadb6!important;border-radius:9px!important}
 #workspace .right-tools.results-tools{
   display:block!important;position:static!important;width:auto!important;max-width:none!important;
   height:auto!important;max-height:none!important;overflow:visible!important;
   background:#cbd8e0!important;border:1px solid #9fadb6!important;border-radius:9px!important;
   padding:9px!important;margin:10px 0 0!important;
 }
 #workspace .right-tools.results-tools .group{
   background:#edf2f5!important;border:1px solid #aebac2!important;border-radius:8px!important;padding:8px!important;
 }
 .drawing-tools{background:#cbd8e0!important}
}
@media(max-width:899px){
 #workspace .right-tools.results-tools{display:block!important;width:100%!important;background:#cbd8e0!important;border:1px solid #9fadb6!important;border-radius:8px!important;padding:8px!important;margin-top:8px!important}
}

/* ===== V0.47 screenshot-correct workspace ===== */
@media (min-width:900px){
 .app-shell main.work-layout{
   grid-template-columns:250px minmax(0,1fr)!important;
   height:calc(100vh - 64px)!important;overflow:hidden!important;
 }
 .left-tools{
   grid-column:1!important;grid-row:1!important;height:100%!important;
   max-height:none!important;overflow-y:auto!important;background:#dfe7ec!important;
 }
 .centre-stage{
   grid-column:2!important;grid-row:1!important;
   display:flex!important;flex-direction:column!important;min-width:0!important;min-height:0!important;
 }
 #workspace{
   order:1!important;flex:1 1 auto!important;min-height:0!important;
   overflow:auto!important;padding:14px!important;
 }
 #workspace .floor-work{
   display:grid!important;
   grid-template-columns:minmax(0,1fr) 255px!important;
   gap:14px!important;align-items:start!important;width:100%!important;
 }
 /* The drawing owns the large centre column. */
 #workspace .floor-wrap,
 #workspace .drawing-card,
 #workspace .surface-card{
   grid-column:1!important;min-width:0!important;max-width:none!important;
 }
 /* Results and openings share one proper right rail. */
 #workspace .results-rail{
   grid-column:2!important;grid-row:1!important;
   display:flex!important;flex-direction:column!important;gap:10px!important;
   min-width:0!important;
 }
 #workspace .results-rail .results{
   width:100%!important;margin:0!important;
   background:#d7e2e8!important;border:1px solid #9fadb6!important;border-radius:9px!important;
 }
 #workspace .results-rail .right-tools.results-tools{
   display:block!important;position:static!important;width:100%!important;
   height:auto!important;max-height:none!important;overflow:visible!important;
   margin:0!important;padding:9px!important;
   background:#cbd8e0!important;border:1px solid #9fadb6!important;border-radius:9px!important;
 }
 #workspace .right-tools .group{
   background:#edf2f5!important;border:1px solid #aebac2!important;border-radius:8px!important;padding:8px!important;
 }
 /* One compact bottom bar: Pattern, conditional Rotate, then Zoom. */
 .drawing-tools{
   order:2!important;flex:0 0 auto!important;
   display:flex!important;flex-direction:row!important;align-items:center!important;
   flex-wrap:nowrap!important;gap:10px!important;
   padding:8px 14px!important;background:#cbd8e0!important;
   border-top:2px solid #9aaab5!important;border-bottom:0!important;
   overflow-x:auto!important;
 }
 .drawing-tools .group{
   flex:0 0 auto!important;margin:0!important;padding:7px 9px!important;
   background:#e7edf1!important;border:1px solid #aebac2!important;border-radius:8px!important;
 }
 .drawing-tools .pattern-grid{display:flex!important;flex-direction:row!important;gap:5px!important;align-items:center!important}
 .drawing-tools .rotate-row,
 .drawing-tools [class*="rotate"]{
   display:inline-flex!important;flex-direction:row!important;align-items:center!important;
   margin:0 0 0 6px!important;
 }
 .drawing-tools h3{margin:0 0 4px!important}
}
/* Portrait keeps the same semantic order but stacks naturally. */
@media(max-width:899px){
 #workspace .results-rail{display:flex;flex-direction:column;gap:8px}
 .drawing-tools{display:flex!important;flex-direction:row!important;flex-wrap:wrap!important;align-items:center!important}
 .drawing-tools .pattern-grid{display:flex!important;flex-wrap:wrap!important;align-items:center!important}
}

/* ===== V0.48 structural correction after inspecting renderer markup ===== */
@media (min-width:1051px){
  #workspace .floor-work{
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 250px!important;
    grid-template-rows:auto!important;
    gap:14px!important;
    align-items:start!important;
  }
  #workspace .canvas-wrap{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
  }
  #workspace .results-rail{
    grid-column:2!important;
    grid-row:1!important;
    display:flex!important;
    flex-direction:column!important;
    gap:10px!important;
    min-width:0!important;
    align-self:start!important;
  }
  #workspace .results-rail > .results-panel{
    display:block;
    width:100%!important;
    margin:0!important;
    background:#d7e2e8!important;
    border:1px solid #9fadb6!important;
    border-radius:9px!important;
  }
  #workspace .results-rail > .right-tools{
    display:block!important;
    position:static!important;
    width:100%!important;
    max-width:none!important;
    height:auto!important;
    max-height:none!important;
    overflow:visible!important;
    margin:0!important;
    padding:9px!important;
    background:#cbd8e0!important;
    border:1px solid #9fadb6!important;
    border-radius:9px!important;
  }

  /* Bottom toolbar: never stack Rotate below Pattern on desktop. */
  .drawing-tools{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:10px!important;
  }
  .drawing-tools > .group{
    display:block!important;
    flex:0 0 auto!important;
  }
  .drawing-tools .pattern-grid{
    display:flex!important;
    flex-direction:row!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:5px!important;
  }
  .drawing-tools .rotate-row,
  .drawing-tools .rotation-row,
  .drawing-tools [class*="rotate"]{
    display:inline-flex!important;
    flex-direction:row!important;
    align-items:center!important;
    vertical-align:middle!important;
    margin-left:6px!important;
    margin-top:0!important;
  }
}

/* V0.49: compact useful drawing viewport */
@media (min-width:1051px){
 #workspace .floor-work{grid-template-columns:minmax(0,1fr) 260px!important}
 #workspace .canvas-wrap{width:100%!important;max-width:1100px!important;justify-self:center!important}
 #workspace .results-rail{width:260px!important}
}

/* ===== V0.50: drawing fills useful viewport; no dead vertical space ===== */
@media (min-width:1051px){
 .centre-stage{
   justify-content:flex-start!important;
 }
 #workspace{
   flex:0 1 auto!important;
   min-height:0!important;
   height:auto!important;
   overflow:auto!important;
   padding:12px 14px 6px!important;
 }
 #workspace .floor-work{
   grid-template-columns:minmax(0,1fr) 260px!important;
   align-items:start!important;
 }
 #workspace .canvas-wrap{
   width:100%!important;
   max-width:1100px!important;
   height:auto!important;
   min-height:0!important;
   justify-self:center!important;
 }
 /* Toolbar follows the drawing instead of being pinned to screen bottom. */
 .drawing-tools{
   order:2!important;
   flex:0 0 auto!important;
   margin-top:0!important;
   align-self:stretch!important;
   justify-content:flex-start!important;
   display:flex!important;
   flex-direction:row!important;
   flex-wrap:nowrap!important;
   gap:10px!important;
 }
 .drawing-tools > .group{
   display:block!important;
   flex:0 0 auto!important;
   margin:0!important;
 }
 .drawing-tools .pattern-grid{
   display:flex!important;
   flex-direction:row!important;
   flex-wrap:nowrap!important;
   gap:5px!important;
 }
 .drawing-tools .toolbar-rotate{
   display:block!important;
   order:2!important;
 }
 .drawing-tools .toolbar-rotate button{
   display:inline-block!important;
   margin:0!important;
 }
 /* Pattern first, explicit Rotate second; Zoom remains the next sibling. */
 .drawing-tools > .group:first-child{order:1!important}
 .drawing-tools > .group:not(:first-child):not(.toolbar-rotate){order:3!important}
}

/* V0.51: renderer now contain-fits the complete surface inside available viewport. */
@media(min-width:1051px){
 #workspace .canvas-wrap{width:100%!important;max-width:none!important}
 #workspace .floor-box{max-width:100%!important;box-sizing:border-box!important}
}

/* V0.52 fixed viewport + pan cursor */
.canvas-wrap{position:relative!important;overflow:hidden!important}
.floor.pannable{cursor:grab!important;touch-action:none!important}
.floor.pannable:active{cursor:grabbing!important}

/* ===== V0.54 actual #canvas viewport ===== */
@media(min-width:1051px){
 #workspace .floor-work{
   grid-template-columns:minmax(0,1fr) 260px!important;
   align-items:start!important;
 }
 #workspace #canvas.canvas-wrap{
   width:100%!important;
   height:560px!important;
   min-height:560px!important;
   max-height:560px!important;
   max-width:none!important;
   position:relative!important;
   overflow:hidden!important;
   justify-self:stretch!important;
 }
}
@media(max-width:1050px){
 #workspace #canvas.canvas-wrap{
   width:100%!important;
   height:480px!important;
   min-height:360px!important;
   position:relative!important;
   overflow:hidden!important;
 }
}

/* ===== V0.55 locked 5:2 drawing viewport ===== */
@media(min-width:1051px){
 #workspace .floor-work{
   grid-template-columns:minmax(0,1fr) 260px!important;
   align-items:start!important;
 }
 #workspace #canvas.canvas-wrap{
   width:min(100%,1100px)!important;
   aspect-ratio:5 / 2!important;
   height:auto!important;
   min-height:0!important;
   max-height:none!important;
   max-width:1100px!important;
   justify-self:center!important;
   position:relative!important;
   overflow:hidden!important;
 }
}
@media(max-width:1050px){
 #workspace #canvas.canvas-wrap{
   width:100%!important;
   aspect-ratio:5 / 2!important;
   height:auto!important;
   min-height:0!important;
   max-height:none!important;
   position:relative!important;
   overflow:hidden!important;
 }
}

/* V0.56 Rotate button + live degree value stay together */
.drawing-tools .toolbar-rotate .zoom-row{
 display:flex!important;
 flex-direction:row!important;
 align-items:center!important;
 gap:7px!important;
}
.drawing-tools .toolbar-rotate .zoom-row span{
 display:inline-block!important;
 min-width:32px!important;
 text-align:left!important;
}

/* ===== V0.57 compact accordion openings ===== */
.opening-control{border:1px solid #aebbc4;border-radius:7px;margin:6px 0;background:#eef3f6;overflow:hidden}
.opening-head{display:flex;align-items:center;gap:5px}
.opening-expander{flex:1;display:grid!important;grid-template-columns:auto auto 1fr;align-items:center;gap:7px;border:0!important;background:transparent!important;text-align:left!important;padding:7px 8px!important;min-height:34px!important}
.opening-expander:hover{background:#e2eaef!important}
.opening-arrow{font-size:11px}
.opening-name{font-weight:700;font-size:12px;white-space:nowrap}
.opening-summary{font-size:10px;color:#64727c;text-align:right;white-space:nowrap}
.opening-enable{padding:0 8px 0 2px;display:flex;align-items:center}
.opening-enable input{width:16px!important;height:16px!important;margin:0!important}
.opening-control .opening-fields{padding:7px 8px 8px;border-top:1px solid #c5d0d7;background:#f8fafb}

/* ===== V0.67 opening row sizing =====
   Keep the enable checkbox inside the row even with long dimension summaries. */
.opening-head{
 display:grid!important;
 grid-template-columns:minmax(0,1fr) 34px!important;
 align-items:stretch!important;
 gap:4px!important;
 min-height:42px!important;
}
.opening-expander{
 min-width:0!important;
 width:100%!important;
 grid-template-columns:auto auto minmax(0,1fr)!important;
 padding:7px 6px 7px 8px!important;
}
.opening-summary{
 min-width:0!important;
 overflow:hidden!important;
 text-overflow:ellipsis!important;
 white-space:nowrap!important;
}
.opening-enable{
 width:34px!important;
 min-width:34px!important;
 padding:0!important;
 display:flex!important;
 align-items:center!important;
 justify-content:center!important;
 align-self:stretch!important;
}
.opening-enable input{
 flex:0 0 16px!important;
 width:16px!important;
 height:16px!important;
 margin:0!important;
}

/* V0.76 — NuVision circular logo */
.logo-mark{
  overflow:hidden;
  padding:0!important;
  background:transparent!important;
}
.logo-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}

/* V0.77 — replace the actual home-screen TS brand mark */
.home-brand .brand-mark{
  width:48px;
  height:48px;
  padding:0;
  overflow:hidden;
  border-radius:50%;
  background:transparent;
}
.home-brand .brand-mark img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:50%;
}

/* V0.78 — NuVision logo in persistent app header on every workspace */
.app-title{
  display:flex;
  align-items:center;
  gap:9px;
}
.app-title .header-logo{
  display:block;
  width:34px;
  height:34px;
  flex:0 0 34px;
  object-fit:contain;
  border-radius:50%;
}

/* V0.79 — persistent workspace header logo */
.brand-button{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
}
.brand-button .header-logo{
  display:block;
  width:32px;
  height:32px;
  flex:0 0 32px;
  object-fit:contain;
  border-radius:50%;
}


/* =========================================================
   V0.80 — PHONE / SMALL-SCREEN WORKSPACE
   Desktop rules above remain unchanged.
   ========================================================= */

@media (max-width: 700px) {

    /* ---------- App shell ---------- */

    .app-shell {
        width: 100%;
        min-width: 0;
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }

    .app-shell header {
        position: sticky;
        top: 0;
        z-index: 100;
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        width: 100%;
        min-height: 54px;
        height: auto;
        padding: 7px 9px;
        gap: 6px;
    }

    .brand-button {
        min-width: 0;
        justify-self: start;
    }

    .brand-button .header-logo {
        width: 30px;
        height: 30px;
        flex-basis: 30px;
    }

    .brand-button strong {
        font-size: 16px;
        white-space: nowrap;
    }

    .brand-button span {
        margin-left: 3px;
        font-size: 9px;
    }

    .project-title {
        grid-column: 2;
        grid-row: 1;
        align-self: center;
        width: auto;
        max-width: 110px;
        font-size: 10px;
        text-align: right;
    }

    .app-shell header nav {
        grid-column: 1 / -1;
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        width: 100%;
        gap: 5px;
    }

    .app-shell header nav button {
        min-width: 0;
        min-height: 38px;
        padding: 7px 4px;
        font-size: 10px;
        white-space: nowrap;
    }

    /* ---------- Main mobile order ---------- */

    .app-shell main.work-layout {
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0;
        overflow: visible !important;
    }

    .left-tools {
        order: 1;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        padding: 8px !important;
        border-right: 0 !important;
        border-bottom: 1px solid #aeb9c1;
    }

    .centre-stage {
        order: 2;
        display: flex !important;
        flex-direction: column !important;
        width: 100%;
        min-width: 0;
        overflow: visible !important;
    }

    /* ---------- Compact input controls ---------- */

    #controls {
        width: 100% !important;
        max-width: none !important;
        padding: 8px !important;
    }

    #controls .group {
        margin: 0 0 7px !important;
        padding: 8px !important;
    }

    #controls h2 {
        margin: 2px 0 7px;
        font-size: 16px;
    }

    #controls h3 {
        margin: 2px 0 7px !important;
        padding: 0 !important;
        font-size: 11px;
    }

    #controls .row {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px !important;
    }

    #controls .field {
        min-width: 0;
        margin: 4px 0;
    }

    #controls .field label,
    #controls label {
        margin: 0 0 4px;
        font-size: 10px;
    }

    #controls input,
    #controls select {
        width: 100% !important;
        max-width: none !important;
        min-height: 42px;
        padding: 8px;
        font-size: 16px;
    }

    #controls button {
        min-height: 42px;
        padding: 8px 6px;
        font-size: 11px;
    }

    #controls .segmented,
    #controls .surface-picker,
    #controls .wall-picker {
        gap: 5px;
    }

    /* ---------- Drawing ---------- */

    #workspace {
        order: 1 !important;
        width: 100%;
        min-width: 0;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible !important;
        padding: 8px !important;
    }

    #workspace .panel {
        min-height: 0;
        padding: 9px;
        border-radius: 8px;
    }

    #workspace .title-row {
        align-items: flex-start;
        margin-bottom: 8px;
        gap: 6px;
    }

    #workspace .title-row h2 {
        font-size: 17px;
    }

    #workspace .muted {
        font-size: 10px;
    }

    #workspace .floor-work {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        min-width: 0;
        gap: 8px !important;
    }

    #workspace #canvas.canvas-wrap {
        order: 1;
        width: 100% !important;
        max-width: none !important;
        aspect-ratio: 5 / 2 !important;
        height: auto !important;
        min-height: 0 !important;
        padding: 24px 20px !important;
        overflow: hidden !important;
    }

    #workspace .dir {
        font-size: 10px;
    }

    #workspace .north {
        top: 5px;
    }

    #workspace .south {
        bottom: 5px;
    }

    #workspace .west {
        left: 5px;
    }

    #workspace .east {
        right: 5px;
    }

    /* ---------- Pattern / Rotate / Zoom ---------- */

    .drawing-tools {
        order: 2 !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        width: 100%;
        padding: 8px !important;
        gap: 7px !important;
        overflow: visible !important;
    }

    .drawing-tools > .group {
        width: 100%;
        margin: 0 !important;
        padding: 8px !important;
    }

    .drawing-tools h3 {
        margin: 0 0 6px !important;
        font-size: 10px;
    }

    .drawing-tools .pattern-grid {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 6px !important;
        width: 100%;
    }

    .drawing-tools button {
        min-height: 44px !important;
        padding: 8px 6px !important;
        font-size: 11px !important;
    }

    .drawing-tools .toolbar-rotate .zoom-row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) 52px;
        width: 100%;
        gap: 7px !important;
    }

    .drawing-tools .toolbar-rotate .zoom-row span {
        min-width: 0 !important;
        text-align: center !important;
    }

    .drawing-tools .zoom-row {
        display: grid !important;
        grid-template-columns: 46px minmax(0, 1fr) 46px 72px;
        width: 100%;
        gap: 6px;
    }

    /* ---------- Results and openings ---------- */

    #workspace .results-rail {
        order: 2;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 8px !important;
    }

    #workspace .results-panel,
    #workspace .results-rail > .results-panel {
        width: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
    }

    #workspace .results-panel h3 {
        margin-bottom: 8px;
        font-size: 11px;
    }

    #workspace .result-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    #workspace .result-grid > div {
        min-width: 0;
        padding-bottom: 6px;
    }

    #workspace .result-grid span,
    #workspace .result-grid b {
        font-size: 11px;
    }

    #workspace .results-rail > .right-tools,
    #workspace .right-tools.results-tools {
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        overflow: visible !important;
        margin: 0 !important;
        padding: 8px !important;
    }

    .opening-head {
        min-height: 46px !important;
    }

    .opening-expander {
        min-height: 46px !important;
    }

    .opening-enable {
        width: 42px !important;
        min-width: 42px !important;
    }

    .opening-enable input {
        width: 20px !important;
        height: 20px !important;
        flex-basis: 20px !important;
    }

    .opening-control .opening-fields {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 7px;
    }

    .opening-control .opening-fields input {
        min-height: 42px;
        font-size: 16px;
    }

    /* Prevent any child from forcing horizontal page scrolling. */
    #controls,
    #workspace,
    .centre-stage,
    .floor-work,
    .results-rail,
    .drawing-tools,
    .group {
        min-width: 0 !important;
        max-width: 100%;
    }
}

/* =========================================================
   V0.80 — PHONE LANDSCAPE
   Keep the drawing useful when the phone is turned sideways.
   ========================================================= */

@media (max-height: 520px) and (orientation: landscape) and (max-width: 950px) {

    .app-shell header {
        position: static;
    }

    #workspace #canvas.canvas-wrap {
        width: min(100%, 760px) !important;
        margin-inline: auto;
    }

    .drawing-tools {
        flex-direction: row !important;
        flex-wrap: wrap !important;
    }

    .drawing-tools > .group {
        width: auto;
        flex: 1 1 280px !important;
    }
}