*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Segoe UI,sans-serif;background:#eef1f3;color:#17212b}button,input,select{font:inherit}button{border:0;border-radius:9px;padding:10px 14px;background:#174c43;color:#fff;font-weight:750;cursor:pointer}.secondary{background:#e5efec;color:#174c43}.danger{background:#a63c3c}.topbar{display:flex;justify-content:space-between;align-items:center;padding:19px 26px;background:#102f2b;color:#fff}.topbar h1{font-size:1.45rem;margin:3px 0}.eyebrow{font-size:.72rem;letter-spacing:.18em;color:#d9b86c;font-weight:800}.top-actions{display:flex;gap:8px}.app{max-width:1700px;margin:auto;padding:18px}.project-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;background:white;padding:13px;border-radius:12px}.project-strip label,.right-panel label{font-size:.83rem;font-weight:750;display:flex;flex-direction:column;gap:5px}input,select{border:1px solid #cbd3d7;border-radius:8px;padding:9px;background:white}.wizard{display:flex;overflow:auto;gap:7px;padding:14px 0}.step{white-space:nowrap;background:#dfe5e7;color:#34434b}.step.active{background:#174c43;color:white}.step span{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;background:rgba(255,255,255,.25);margin-right:5px}.workspace{display:grid;grid-template-columns:minmax(720px,1fr) 330px;gap:14px;align-items:start}.left-panel,.right-panel{background:#fff;border-radius:13px;padding:15px;box-shadow:0 8px 26px rgba(26,41,50,.08);min-width:0}.panel-title{display:flex;justify-content:space-between;gap:12px}.panel-title h2,.right-panel h2{margin:0 0 5px}.panel-title p{margin:0;color:#68757c;font-size:.85rem}.panel-title span{background:#d8aa56;color:#222;padding:6px 10px;border-radius:999px;font-weight:800;font-size:.75rem}.toolbar{display:flex;flex-wrap:wrap;gap:7px;margin:13px 0}#drawing{width:100%;height:auto;border:1px solid #cbd3d7;border-radius:10px;background-color:#fafcfc;background-image:linear-gradient(#e9eeef 1px,transparent 1px),linear-gradient(90deg,#e9eeef 1px,transparent 1px);background-size:20px 20px;touch-action:none}.drawing-key{display:flex;gap:13px;flex-wrap:wrap;font-size:.78rem;margin-top:9px}.k{display:inline-block;width:17px;height:4px;margin-right:4px;vertical-align:middle}.finished{background:#1c8b66}.wall{background:#738087}.appliance{background:#e98937}.splash{background:#367cc1}.stage{display:none}.stage.active{display:block}.stage h3{margin-bottom:8px}.hidden{display:none!important}.notice{background:#eef6f3;border-left:4px solid #174c43;padding:10px;border-radius:7px;font-size:.85rem;margin:10px 0}.muted{color:#6b777e}.two,.button-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:9px 0}.right-panel label{margin:9px 0}.nav-actions{display:flex;justify-content:space-between;margin-top:18px;padding-top:12px;border-top:1px solid #e1e5e7}.quote-dock{position:sticky;top:12px}.q{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #e3e7e8;font-size:.87rem}.q.total{font-size:1.12rem;color:#174c43;border:0;padding-top:15px}.custom-entry{display:grid;grid-template-columns:1fr 65px 85px auto;gap:5px}.custom-row{display:grid;grid-template-columns:1fr 55px 75px 25px;gap:5px;padding:6px 0;font-size:.8rem;border-bottom:1px solid #eee}#slabs{width:100%;height:auto;border:1px solid #ccd4d8;border-radius:9px;background:#f7f8f8;margin-top:10px}.overlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;overflow:auto;padding:20px}.packet-shell{max-width:1100px;margin:auto;background:#fff;min-height:100%;padding:22px}
.branding-shell{max-width:520px;margin:60px auto;background:#fff;border-radius:14px;padding:24px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.branding-shell label{display:flex;flex-direction:column;gap:5px;font-size:.85rem;font-weight:750;margin:14px 0}
.branding-email-hint{font-size:.76rem;margin:-8px 0 4px;line-height:1.4}
.branding-logo-preview{display:flex;align-items:center;gap:14px;margin:10px 0}
.branding-logo-preview img{max-width:160px;max-height:80px;object-fit:contain;border:1px solid #dde2e4;border-radius:8px;padding:6px;background:#fafafa}
.branding-actions{display:flex;gap:9px;margin-top:18px}
.quote-logo-img{max-height:56px;max-width:220px;object-fit:contain}
.v50-logo-img{max-height:78px;max-width:200px;object-fit:contain}.packet-toolbar{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid #ddd;margin-bottom:20px}.sheet{page-break-after:always;padding:20px;border:1px solid #ddd;margin-bottom:18px}.sheet h2{color:#174c43}.piece-svg,.slab-svg{width:100%;max-height:520px;border:1px solid #ddd;background:#fafafa}.edge-table{width:100%;border-collapse:collapse;margin-top:14px}.edge-table th,.edge-table td{border:1px solid #ccd2d4;padding:7px;text-align:left}.color-cell{width:30px}.packet-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px}.price-table{width:100%;border-collapse:collapse}.price-table td{border-bottom:1px solid #ddd;padding:8px}.price-table td:last-child{text-align:right;font-weight:700}@media(max-width:1200px){.workspace{grid-template-columns:1fr 360px}}@media(max-width:820px){.workspace{grid-template-columns:1fr}.project-strip{grid-template-columns:1fr 1fr}.right-panel{order:-1}.custom-entry{grid-template-columns:1fr 1fr}.topbar{align-items:flex-start;flex-direction:column;gap:10px}}@media print{body>*:not(#packetOverlay){display:none!important}.overlay{display:block!important;position:static;background:white;padding:0}.packet-shell{padding:0}.packet-toolbar{display:none}.sheet{border:0;margin:0}.sheet:last-child{page-break-after:auto}}
.project-explorer{border:1px solid #d8dfe1;background:#f8faf9;border-radius:10px;padding:11px;margin:12px 0}
.explorer-heading{display:flex;align-items:center;justify-content:space-between;gap:10px}
.explorer-heading h3{margin:0;font-size:.95rem}.explorer-heading p{margin:2px 0 0;color:#6c787e;font-size:.75rem}
.project-explorer label{display:flex;flex-direction:column;gap:5px;font-size:.78rem;font-weight:750;margin:8px 0}
.explorer-tree{display:grid;gap:7px;max-height:190px;overflow:auto}
.room-node{border:1px solid #dce2e4;border-radius:8px;background:#fff}
.room-title{display:flex;justify-content:space-between;align-items:center;padding:7px 8px;font-weight:800;font-size:.8rem;background:#edf3f1}
.room-pieces{padding:5px}.piece-node{width:100%;text-align:left;background:#fff;color:#26343b;border:1px solid transparent;padding:7px 8px;margin:2px 0}
.piece-node:hover,.piece-node.active{border-color:#d6ae62;background:#fff8e8}.empty-room{font-size:.75rem;color:#7a858b;padding:6px}


.dimension-editor{margin-top:14px;padding-top:12px;border-top:1px solid #dde3e5}.dimension-editor h3{margin:0 0 8px;font-size:.95rem}

/* ── Pro upgrade button in topbar ── */
.pro-upgrade-btn{display:inline-flex;align-items:center;gap:5px;background:#d9a030;color:#1a1a1a;font-weight:800;font-size:.82rem;padding:9px 14px;border-radius:9px;text-decoration:none;white-space:nowrap;transition:background .15s}
.pro-upgrade-btn:hover{background:#c48c20}

/* ── Inline nudge after quote total ── */
.pro-inline-nudge{display:flex;align-items:flex-start;gap:10px;background:#fffbf0;border:1px solid #e8c96a;border-radius:9px;padding:12px 14px;margin-top:16px;font-size:.84rem;line-height:1.5}
.pro-nudge-lock{font-size:1.1rem;flex-shrink:0;margin-top:1px}
.pro-nudge-link{color:#174c43;font-weight:800;text-decoration:underline}
.pro-nudge-link:hover{color:#0f3329}

/* ── Pro upsell card on Shop Packet step ── */
.pro-upsell-card{margin-top:20px;background:linear-gradient(135deg,#0f2e28 0%,#174c43 100%);border-radius:13px;padding:22px 20px;color:#fff}
.pro-upsell-badge{display:inline-block;background:#d9a030;color:#1a1a1a;font-size:.72rem;font-weight:900;letter-spacing:.06em;padding:4px 10px;border-radius:999px;margin-bottom:12px}
.pro-upsell-title{margin:0 0 8px;font-size:1.05rem;font-weight:800;line-height:1.3}
.pro-upsell-desc{margin:0 0 14px;font-size:.83rem;color:#b8d4ce;line-height:1.5}
.pro-upsell-list{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:6px}
.pro-upsell-list li{font-size:.82rem;color:#d4ece6;font-weight:600}
.pro-upsell-cta{display:block;text-align:center;background:#d9a030;color:#1a1a1a;font-weight:900;font-size:.92rem;padding:12px;border-radius:9px;text-decoration:none;transition:background .15s}
.pro-upsell-cta:hover{background:#c48c20}
.pro-upsell-fine{text-align:center;font-size:.73rem;color:#7aada3;margin:8px 0 0}

.slab-actions{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.seam-suggestions{display:grid;gap:8px;margin:10px 0}
.seam-card{border:1px solid #d6dde0;border-radius:9px;padding:10px;background:#fbfcfc}
.seam-card.selected{border-color:#b33b35;background:#fff7f6}
.seam-card h4{margin:0 0 5px}.seam-card p{font-size:.8rem;color:#637078;margin:4px 0}
.seam-card-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:7px}
.seam-badge{display:inline-block;background:#f4d9d6;color:#8f2823;border-radius:999px;padding:3px 7px;font-size:.72rem;font-weight:800}

.pricing-summary{margin-top:18px;border-top:1px solid #dfe4e6;padding-top:14px}
.pricing-summary h3{margin:0 0 8px}
.pricing-summary .q{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid #e3e7e8;font-size:.88rem}
.pricing-summary .q.total{font-size:1.15rem;color:#174c43;border-bottom:0;padding-top:14px}


/* V50 Shop Packet Engine */
.v50-sheet{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#111;padding:0;border:1px solid #bfc5c8}
.v50-header{display:grid;grid-template-columns:230px 1fr 280px;border-bottom:1px solid #bfc5c8;min-height:112px}
.v50-brand{display:flex;flex-direction:column;align-items:center;justify-content:center;border-right:1px solid #bfc5c8}
.v50-brand-name{font-size:29px;letter-spacing:2px;font-weight:800;color:#173956}
.v50-brand-sub{font-size:12px;letter-spacing:5px;color:#173956}
.v50-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 18px;padding:16px;font-size:12px;align-content:center}
.v50-page-title{border-left:1px solid #bfc5c8;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px}
.v50-page-title strong{font-size:24px}.v50-page-title span{font-size:12px}.v50-page-title b{font-size:14px}
.v50-cover{display:grid;grid-template-columns:1.1fr .9fr;gap:24px;padding:42px;min-height:620px;align-content:start}
.v50-cover h1{font-size:28px;margin-top:0;color:#173956}
.v50-cover-box,.v50-notes-box{border:1px solid #bfc5c8;padding:16px}
.v50-notes-box{grid-column:2}
.v50-body-title{font-weight:800;color:#173956;padding:10px 16px 0;font-size:14px}
.v50-svg{width:100%;display:block;background:#fff}
.v50-footnote{font-size:11px;padding:5px 16px 12px;color:#555}
@media print{
  .v50-sheet{page-break-after:always;border:0;margin:0;min-height:7.2in}
  .v50-sheet:last-child{page-break-after:auto}
  .v50-header{min-height:0}
}

.customer-quote-sheet{font-family:Arial,Helvetica,sans-serif;background:#fff;color:#17212b;padding:24px 28px}
.cq-header{display:grid;grid-template-columns:1fr 1fr;border-bottom:3px solid #173956;padding-bottom:14px;align-items:end}
.cq-brand-main{font-size:30px;font-weight:800;letter-spacing:2px;color:#173956}.cq-brand-sub{font-size:12px;letter-spacing:5px;color:#173956}
.cq-title{text-align:right}.cq-title h1{margin:0 0 8px;font-size:25px;color:#173956}.cq-title div{font-size:12px;margin:2px 0}
.cq-info-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:16px 0}.cq-card{border:1px solid #cfd5d8;border-radius:5px;padding:11px 13px}.cq-card h3{margin:0 0 8px;color:#173956;font-size:14px}.cq-card p{margin:4px 0;font-size:12px}
.cq-section-title{background:#edf1f2;border:1px solid #cfd5d8;padding:6px 9px;color:#173956;font-weight:800;font-size:13px}
.cq-drawing-svg{width:100%;display:block;border:1px solid #cfd5d8;border-top:0;background:#fff;max-height:480px}
.cq-lower-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:18px;margin-top:16px}
.cq-summary-table,.cq-price-table{width:100%;border-collapse:collapse;font-size:12px}.cq-summary-table td,.cq-price-table td{padding:7px 8px;border-bottom:1px solid #e0e4e6}.cq-summary-table td:last-child,.cq-price-table td:last-child{text-align:right;font-weight:700}
.cq-subtotal td{border-top:2px solid #aab2b6;font-weight:700}.cq-total td{font-size:16px;color:#173956;font-weight:900;border-top:2px solid #173956;padding-top:11px}
.cq-color-key{display:flex;flex-wrap:wrap;gap:12px;margin-top:13px;font-size:11px}.cq-color-key i{display:inline-block;width:22px;height:4px;margin-right:5px;vertical-align:middle}.cq-color-key .cq-seam{height:0;border-top:3px dashed #c53b34;background:none}
.cq-terms{border:1px solid #cfd5d8;padding:11px 13px;margin-top:17px;font-size:10.5px;line-height:1.35}.cq-terms h3{font-size:13px;color:#173956;margin:0 0 7px}.cq-terms p{margin:5px 0}
.cq-signatures{display:grid;grid-template-columns:1fr 1fr;gap:28px;margin-top:26px;font-size:11px}
@media print{.customer-quote-sheet{padding:8mm 9mm}.cq-drawing-svg{max-height:105mm}}

.project-menu-wrap{position:relative}.project-menu{position:absolute;right:0;top:44px;z-index:40;width:225px;background:#fff;border:1px solid #cfd6d9;border-radius:10px;box-shadow:0 14px 35px rgba(0,0,0,.18);padding:7px}.project-menu button{display:block;width:100%;text-align:left;background:#fff;color:#243239;padding:9px 10px;border-radius:7px}.project-menu button:hover{background:#eef4f2}.project-menu hr{border:0;border-top:1px solid #e1e5e7;margin:6px 0}

.status-bar{position:sticky;bottom:0;z-index:20;display:flex;flex-wrap:wrap;gap:18px;background:#102f2b;color:#fff;padding:9px 18px;font-size:.8rem;box-shadow:0 -4px 16px rgba(0,0,0,.12)}.status-bar span{white-space:nowrap}.status-total{margin-left:auto;color:#f4d58c}.left-panel{min-height:720px}#drawing{max-height:720px}@media(max-width:1050px){.workspace{grid-template-columns:1fr}.status-total{margin-left:0}}

.project-menu-title{font-size:.72rem;font-weight:900;letter-spacing:.12em;color:#7a858b;padding:6px 10px 4px;text-transform:uppercase}
.project-menu-status{font-size:.72rem;color:#69757b;padding:5px 10px 7px}
.drawing-wrap{position:relative}
.inline-dim-editor{position:absolute;z-index:25;display:flex;align-items:center;gap:4px;background:#fff;border:1px solid #c7d0d4;border-radius:9px;padding:5px 6px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.inline-dim-editor input{width:86px;padding:6px 7px}
.inline-dim-editor span{font-size:.75rem;color:#67737a}
.inline-dim-editor button{padding:6px 9px;border-radius:7px}

.edge-popup{position:absolute;z-index:26;display:flex;align-items:center;gap:5px;background:#fff;border:1px solid #c7d0d4;border-radius:10px;padding:6px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
.edge-popup-title{font-size:.72rem;font-weight:800;color:#66747b;margin-right:2px}
.edge-popup .edge-choice{padding:7px 9px;font-size:.75rem}
.edge-popup .edge-choice.blue{background:#2867d6}
.edge-popup .edge-choice.green{background:#2f9b57}
.edge-popup .edge-choice.orange{background:#f28c28}
.edge-popup .edge-close{padding:7px 9px}

.nesting-stage{position:relative}
.nesting-stage.active{display:block}
body.legacy-nesting-mode .workspace{display:block}
body.legacy-nesting-mode .left-panel{display:none}
body.legacy-nesting-mode .right-panel{width:100%;max-width:none}
body.legacy-nesting-mode .right-panel>.stage:not(.nesting-stage){display:none}
body.legacy-nesting-mode .nav-actions{display:none}
.nesting-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:end;flex-wrap:wrap;padding:10px 0 14px;border-bottom:1px solid #dfe4e6}
.nesting-toolbar-left{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.nesting-toolbar-left h2{margin:0 12px 2px 0}.nesting-toolbar-left label{width:92px;font-size:.75rem}
.nesting-actions{display:flex;gap:7px;flex-wrap:wrap}
.nesting-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;margin-top:12px}
.nest-piece-panel{border:1px solid #d8dfe2;border-radius:10px;background:#fafbfb;padding:10px;min-height:680px}
.nest-piece-panel h3{margin:0 0 8px}.nest-piece-btn{width:100%;text-align:left;background:#fff;color:#25323a;border:1px solid #d9dfe2;margin:4px 0;padding:8px}.nest-piece-btn.active{border-color:#d4a64f;background:#fff8e9}
.nest-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.nest-stats div{border:1px solid #e0e5e7;border-radius:8px;background:#fff;padding:7px}.nest-stats b{display:block;font-size:.67rem;color:#68747a;text-transform:uppercase}.nest-stats span{font-weight:800}
.nest-canvas-panel{min-width:0}.nest-canvas-wrap{height:720px;overflow:hidden;border:1px solid #ccd4d8;border-radius:10px;background:#e9ecee;position:relative}.nest-canvas-wrap canvas{width:100%;height:100%;display:block;background:#e9ecee}
.nest-help{font-size:.75rem;color:#68747a;margin-top:6px}
@media(max-width:900px){.nesting-body{grid-template-columns:1fr}.nest-piece-panel{min-height:auto}.nest-canvas-wrap{height:600px}}

.nest-canvas-wrap{overflow:hidden}
.nest-overflow-note{font-size:.72rem;color:#6b757b;margin-top:4px}

/* V54 Fabrication & Nesting Studio */
body.fabrication-studio-mode .workspace{display:block}
body.fabrication-studio-mode .left-panel{display:none}
body.fabrication-studio-mode .right-panel{width:100%;max-width:none}
body.fabrication-studio-mode .right-panel>.stage:not(.fabrication-studio-stage){display:none}
body.fabrication-studio-mode .nav-actions{display:none}

.fabrication-studio-stage{width:100%}
.fab-studio-header{display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid #dce2e5;padding-bottom:12px}
.fab-studio-header h2{margin:0 0 3px}
.fab-mode-tabs{display:flex;border:1px solid #ccd4d8;border-radius:10px;overflow:hidden;background:#fff}
.fab-mode{background:#fff;color:#334148;border-radius:0;border:0;padding:10px 16px}
.fab-mode.active{background:#174c43;color:#fff}
.fab-view{display:none}.fab-view.active{display:block}
.fab-toolbar{display:flex;gap:7px;flex-wrap:wrap;padding:12px 0}
.fab-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:12px}
.fab-tree-panel{border:1px solid #d8dfe2;border-radius:10px;background:#fafbfb;padding:10px;min-height:700px}
.fab-tree-panel h3{margin:0 0 8px}
.fab-tree-group{font-size:.72rem;font-weight:900;color:#68757b;text-transform:uppercase;margin:11px 0 4px}
.fab-tree-btn{width:100%;text-align:left;background:#fff;color:#25323a;border:1px solid #d9dfe2;margin:4px 0;padding:8px;border-radius:8px}
.fab-tree-btn.active{border-color:#d4a64f;background:#fff8e9}
.fab-tree-child{padding-left:15px;font-size:.75rem;color:#59686f;margin:3px 0}
.fab-info-card{border:1px solid #dfe4e6;border-radius:8px;padding:9px;background:#fff;margin-top:14px;font-size:.75rem}
.fab-info-card b,.fab-info-card span{display:block}.fab-info-card span{margin-top:4px;color:#6c777d}
.fab-canvas-wrap{height:720px;overflow:hidden;border:1px solid #ccd4d8;border-radius:10px;background:#e9ecee;position:relative}
.fab-canvas-wrap canvas{width:100%;height:100%;display:block}
.fab-canvas-wrap.prep{background:#e7eaec}
.nesting-toolbar{display:flex;justify-content:space-between;gap:14px;align-items:end;flex-wrap:wrap;padding:12px 0;border-bottom:1px solid #dfe4e6}
.nesting-toolbar-left{display:flex;align-items:end;gap:8px;flex-wrap:wrap}.nesting-toolbar-left label{width:92px;font-size:.75rem}
.nesting-actions{display:flex;gap:7px;flex-wrap:wrap}
.nesting-body{display:grid;grid-template-columns:220px minmax(0,1fr);gap:12px;margin-top:12px}
.nest-piece-panel{border:1px solid #d8dfe2;border-radius:10px;background:#fafbfb;padding:10px;min-height:680px}
.nest-piece-panel h3{margin:0 0 8px}.nest-piece-btn{width:100%;text-align:left;background:#fff;color:#25323a;border:1px solid #d9dfe2;margin:4px 0;padding:8px}.nest-piece-btn.active{border-color:#d4a64f;background:#fff8e9}
.nest-stats{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:14px}.nest-stats div{border:1px solid #e0e5e7;border-radius:8px;background:#fff;padding:7px}.nest-stats b{display:block;font-size:.67rem;color:#68747a;text-transform:uppercase}.nest-stats span{font-weight:800}
.nest-canvas-wrap{height:720px;overflow:hidden;border:1px solid #ccd4d8;border-radius:10px;background:#e9ecee;position:relative}.nest-canvas-wrap canvas{width:100%;height:100%;display:block}
.nest-help{font-size:.75rem;color:#68747a;margin-top:6px}
@media(max-width:900px){.fab-layout,.nesting-body{grid-template-columns:1fr}.fab-tree-panel,.nest-piece-panel{min-height:auto}.fab-canvas-wrap,.nest-canvas-wrap{height:600px}}

body.fabrication-studio-mode .workspace{display:grid}
body.fabrication-studio-mode .left-panel{display:block}
body.fabrication-studio-mode .right-panel{width:auto}
body.fabrication-studio-mode .nav-actions{display:flex}
.quote-material-header{display:flex;justify-content:space-between;gap:18px;align-items:center;border-bottom:1px solid #dfe4e6;padding-bottom:12px}
.quote-material-header h2{margin:0 0 3px}
.quote-material-inputs{display:grid;grid-template-columns:repeat(4,minmax(130px,1fr));gap:10px;margin:14px 0}
.material-check-result{display:flex;gap:14px;align-items:center;border:1px solid #d6dde0;border-radius:12px;padding:14px;margin-bottom:12px;background:#fafbfb}
.material-check-result.pass{border-color:#7fb698;background:#f2faf5}.material-check-result.fail{border-color:#d58c8c;background:#fff4f4}.material-check-result.neutral{background:#fafbfb}
.material-check-icon{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;font-weight:900;font-size:22px;background:#e4e9eb;color:#536169}
.material-check-result.pass .material-check-icon{background:#d7f0df;color:#237042}.material-check-result.fail .material-check-icon{background:#f4dada;color:#9c3434}
.material-check-result h3{margin:0 0 3px}.material-check-result p{margin:0;color:#68747a}
.material-metrics{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:12px}
.material-metrics div{border:1px solid #dde3e6;border-radius:9px;padding:9px;background:#fff}.material-metrics b{display:block;font-size:.68rem;text-transform:uppercase;color:#6f7b81;margin-bottom:3px}.material-metrics span{font-size:1rem;font-weight:800}
.material-layout-card{border:1px solid #d8dfe2;border-radius:10px;overflow:hidden;background:#fff}.material-layout-title{display:flex;justify-content:space-between;align-items:center;padding:9px 12px;border-bottom:1px solid #e0e5e7}.material-layout-title h3{margin:0}.material-layout-title span{font-size:.75rem;color:#69757c}
.material-canvas-wrap{height:600px;background:#e9ecee;overflow:hidden}.material-canvas-wrap canvas{width:100%;height:100%;display:block}
.material-check-note{font-size:.75rem;color:#6b777d;margin-top:8px}
@media(max-width:900px){.quote-material-inputs,.material-metrics{grid-template-columns:1fr 1fr}.material-canvas-wrap{height:500px}}

/* V54.3 Draw + Material Check */
.draw-material-check{
  margin-top:12px;
}
.draw-material-check .quote-material-header{
  align-items:flex-start;
}
.draw-material-check .quote-material-header h2{
  font-size:1.05rem;
  margin:0 0 3px;
}
.draw-material-check .quote-material-inputs{
  grid-template-columns:1fr 1fr;
}
.draw-material-check .material-metrics{
  grid-template-columns:1fr 1fr;
}
.draw-material-check .material-layout-card{
  margin-top:10px;
}
.draw-material-check .material-canvas-wrap{
  height:320px;
}
.draw-material-check .material-layout-title{
  display:block;
}
.draw-material-check .material-layout-title span{
  display:block;
  margin-top:2px;
}
#legacyPieceProperties{
  display:none !important;
}
@media(max-width:1050px){
  .draw-material-check .quote-material-inputs,
  .draw-material-check .material-metrics{
    grid-template-columns:1fr;
  }
}

/* V54.7 UI cleanup */
.draw-material-check{
  margin-top:0;
  margin-bottom:14px;
}
.draw-material-check > hr{
  display:none;
}
.draw-material-check .quote-material-header{
  margin-top:0;
}
.draw-material-check .quote-material-inputs{
  grid-template-columns:minmax(0,1fr) minmax(0,.55fr);
  gap:8px;
}
.draw-material-check .quote-material-inputs label{
  min-width:0;
}
.draw-material-check .quote-material-inputs input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.draw-material-check .quote-material-inputs label:nth-child(2),
.draw-material-check .quote-material-inputs label:nth-child(4){
  width:55%;
  justify-self:start;
}
.draw-material-check .material-metrics{
  grid-template-columns:1fr 1fr;
}
.right-panel{
  min-width:0;
}
@media(max-width:1050px){
  .draw-material-check .quote-material-inputs{
    grid-template-columns:1fr 1fr;
  }
  .draw-material-check .quote-material-inputs label:nth-child(2),
  .draw-material-check .quote-material-inputs label:nth-child(4){
    width:65%;
  }
}

/* V54.8 quarter-inch dimensions */
input[type="number"]{
  box-sizing:border-box;
}

.material-check-actions{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:stretch;
  min-width:180px;
}
.material-check-actions button{
  width:100%;
}

/* V54.10 inline Advanced Nesting Studio */
body.inline-advanced-mode .workspace{
  display:block;
}
body.inline-advanced-mode .left-panel{
  display:none !important;
}
body.inline-advanced-mode .right-panel{
  width:100%;
  max-width:none;
  min-width:0;
}
body.inline-advanced-mode .right-panel .stage:not([data-stage="0"]){
  display:none !important;
}
body.inline-advanced-mode .right-panel .stage[data-stage="0"]{
  display:block !important;
  width:100%;
  max-width:100%;
}
body.inline-advanced-mode .right-panel .stage[data-stage="0"] > h2,
body.inline-advanced-mode .right-panel .stage[data-stage="0"] > .notice,
body.inline-advanced-mode .right-panel .stage[data-stage="0"] > label{
  display:none;
}
.material-advanced-view{
  width:100%;
}
.advanced-inline-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  border-bottom:1px solid #dfe4e6;
  padding-bottom:10px;
}
.advanced-inline-header h2{margin:0 0 3px}
.advanced-inline-toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  padding:10px 0;
}
.advanced-inline-body{
  display:grid;
  grid-template-columns:220px minmax(0,1fr);
  gap:12px;
}
.advanced-piece-panel{
  border:1px solid #d8dfe2;
  border-radius:10px;
  background:#fafbfb;
  padding:10px;
  min-height:650px;
}
.advanced-piece-panel h3{margin:0 0 8px}
.nest-piece-btn{
  width:100%;
  text-align:left;
  background:#fff;
  color:#25323a;
  border:1px solid #d9dfe2;
  margin:4px 0;
  padding:8px;
  border-radius:8px;
}
.nest-piece-btn.active{
  border-color:#d4a64f;
  background:#fff8e9;
}
.advanced-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:7px;
  margin-top:12px;
}
.advanced-stats div{
  border:1px solid #e0e5e7;
  border-radius:8px;
  background:#fff;
  padding:7px;
}
.advanced-stats b{
  display:block;
  font-size:.67rem;
  color:#68747a;
  text-transform:uppercase;
}
.advanced-stats span{font-weight:800}
.advanced-canvas-panel{min-width:0}
.advanced-canvas-wrap{
  height:720px;
  border:1px solid #ccd4d8;
  border-radius:10px;
  background:#e9ecee;
  overflow:hidden;
}
#advancedCanvasHost,
#advancedCanvasHost canvas{
  width:100%;
  height:100%;
  display:block;
}
@media(max-width:900px){
  .advanced-inline-body{grid-template-columns:1fr}
  .advanced-piece-panel{min-height:auto}
  .advanced-canvas-wrap{height:560px}
}

.advanced-return-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.saved-nest-notice{
  border:1px solid #78b18f;
  background:#f1faf4;
  color:#285f3c;
  border-radius:8px;
  padding:7px 9px;
  margin-bottom:8px;
  font-size:.76rem;
  font-weight:700;
}

/* V54.20 Material Check + Pricing sizing */
.draw-material-check .quote-material-inputs label:nth-child(1),
.draw-material-check .quote-material-inputs label:nth-child(3){
  width:55%;
  max-width:55%;
  justify-self:start;
}
.draw-material-check .quote-material-inputs label:nth-child(1) input,
.draw-material-check .quote-material-inputs label:nth-child(3) input{
  width:100%;
  max-width:100%;
  box-sizing:border-box;
}
.stage[data-stage="5"] input[type="number"],
.stage[data-stage="5"] input[type="text"],
.stage[data-stage="5"] select{
  width:50%;
  max-width:50%;
  box-sizing:border-box;
}
@media(max-width:900px){
  .stage[data-stage="5"] input[type="number"],
  .stage[data-stage="5"] input[type="text"],
  .stage[data-stage="5"] select{
    width:65%;
    max-width:65%;
  }
}

/* V54.21 Material Check compact inputs */
.draw-material-check .quote-material-inputs{
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}
.draw-material-check .quote-material-inputs label{
  width:55% !important;
  max-width:55% !important;
  min-width:0;
  justify-self:start;
}
.draw-material-check .quote-material-inputs input{
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  box-sizing:border-box;
}

/* V54.21 Live Quote custom-item overflow fix */
.stage[data-stage="5"]{
  min-width:0;
  overflow:hidden;
}
.stage[data-stage="5"] #customRows,
.stage[data-stage="5"] .custom-row,
.stage[data-stage="5"] .custom-item-row,
.stage[data-stage="5"] .pricing-custom-row{
  width:100%;
  max-width:100%;
  min-width:0;
  box-sizing:border-box;
}
.stage[data-stage="5"] .custom-row,
.stage[data-stage="5"] .custom-item-row,
.stage[data-stage="5"] .pricing-custom-row{
  display:grid;
  grid-template-columns:minmax(0,1.4fr) minmax(55px,.55fr) minmax(70px,.7fr) auto;
  gap:6px;
  align-items:end;
}
.stage[data-stage="5"] #customRows input,
.stage[data-stage="5"] #customRows select,
.stage[data-stage="5"] .custom-row input,
.stage[data-stage="5"] .custom-item-row input,
.stage[data-stage="5"] .pricing-custom-row input{
  width:100% !important;
  max-width:100% !important;
  min-width:0;
  box-sizing:border-box;
}
.stage[data-stage="5"] #customRows button,
.stage[data-stage="5"] .custom-row button,
.stage[data-stage="5"] .custom-item-row button,
.stage[data-stage="5"] .pricing-custom-row button{
  width:auto;
  max-width:100%;
  white-space:nowrap;
}
@media(max-width:900px){
  .stage[data-stage="5"] .custom-row,
  .stage[data-stage="5"] .custom-item-row,
  .stage[data-stage="5"] .pricing-custom-row{
    grid-template-columns:1fr 70px 80px;
  }
}

.edge-choice.unfinished{border-color:#8b9296}
.k.unfinished{background:#8b9296}

/* V54.22 Custom Items fully contained in Live Quote */
.stage[data-stage="5"] .custom-entry{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 48px 72px 48px !important;
  gap:5px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  align-items:center;
}
.stage[data-stage="5"] .custom-entry input{
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  padding-left:6px;
  padding-right:6px;
}
.stage[data-stage="5"] .custom-entry button{
  width:48px !important;
  min-width:48px !important;
  max-width:48px !important;
  padding-left:4px !important;
  padding-right:4px !important;
}
.stage[data-stage="5"] #customList{
  width:100%;
  max-width:100%;
  min-width:0;
  overflow:hidden;
  box-sizing:border-box;
}
.stage[data-stage="5"] #customList .custom-row{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) 42px 68px 34px !important;
  gap:5px !important;
  width:100% !important;
  max-width:100% !important;
  min-width:0 !important;
  box-sizing:border-box !important;
  align-items:center;
}
.stage[data-stage="5"] #customList .custom-row span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stage[data-stage="5"] #customList .custom-row button{
  width:34px !important;
  min-width:34px !important;
  max-width:34px !important;
  padding:4px !important;
}

/* SlabCal.com branding */
.slabcal-brand{display:flex;align-items:center;min-width:0}
.slabcal-brand img{display:block;width:min(500px,46vw);max-height:88px;object-fit:contain;object-position:left center}
@media(max-width:800px){.slabcal-brand img{width:min(350px,72vw);max-height:68px}}


/* =========================================================
   SLABCAL.COM BLUE DASHBOARD THEME
   Visual refresh inspired by approved concept mockup.
   Keeps existing application structure and JS functionality.
   ========================================================= */

:root{
  --sc-blue:#0b56d8;
  --sc-blue-dark:#073b9a;
  --sc-blue-deep:#052b73;
  --sc-blue-soft:#eaf2ff;
  --sc-line:#c9d7ee;
  --sc-panel:#ffffff;
  --sc-bg:#eef3f9;
  --sc-text:#172338;
  --sc-muted:#657089;
  --sc-danger:#d93434;
  --sc-shadow:0 8px 22px rgba(5,43,115,.10);
  --sc-radius:12px;
}

*{box-sizing:border-box}

body.slabcal-blue-ui{
  margin:0;
  background:
    linear-gradient(rgba(238,243,249,.96),rgba(238,243,249,.96)),
    radial-gradient(circle at 20% 10%, rgba(11,86,216,.08), transparent 32%);
  color:var(--sc-text);
  font-family:Inter,Segoe UI,Arial,sans-serif;
}

/* HEADER */
.slabcal-blue-ui .topbar{
  min-height:150px;
  padding:10px 18px 12px;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:22px;
  background:#fff;
  border-bottom:5px solid var(--sc-blue);
  box-shadow:0 4px 18px rgba(5,43,115,.12);
  position:relative;
  z-index:10;
}

.slabcal-blue-ui .slabcal-brand{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:flex-start;
}

.slabcal-blue-ui .slabcal-brand img{
  width:min(1120px,72vw) !important;
  max-width:none !important;
  max-height:132px !important;
  height:auto;
  object-fit:contain;
  object-position:left top;
  display:block;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.08));
}

.slabcal-blue-ui .top-actions{
  flex:0 0 auto;
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  justify-content:flex-end;
  align-items:flex-start;
  padding-top:8px;
}

.slabcal-blue-ui .top-actions button,
.slabcal-blue-ui .project-menu-wrap > button{
  min-height:38px;
  border-radius:8px;
  border:1px solid #9ab8ee;
  background:#fff;
  color:var(--sc-blue-dark);
  font-weight:700;
  box-shadow:0 2px 6px rgba(11,86,216,.08);
}

/* APP WRAPPER */
.slabcal-blue-ui .app{
  width:100%;
  max-width:none;
  padding:12px 14px 0;
}

/* PROJECT STRIP */
.slabcal-blue-ui .project-strip{
  display:grid;
  grid-template-columns:1fr 1.2fr 1.2fr .7fr .7fr;
  gap:10px;
  background:#fff;
  border:1px solid var(--sc-line);
  border-radius:var(--sc-radius);
  padding:10px 12px;
  box-shadow:var(--sc-shadow);
  margin-bottom:10px;
}
.slabcal-blue-ui .project-strip label{
  color:var(--sc-blue-dark);
  font-weight:800;
  font-size:.78rem;
}
.slabcal-blue-ui .project-strip input{
  border:1px solid #a8bddd;
  border-radius:7px;
  background:#fbfdff;
}

/* WIZARD / NAV */
.slabcal-blue-ui .wizard{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:0;
  margin:0 0 10px;
  padding:0;
  border-radius:10px;
  overflow:hidden;
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  box-shadow:0 5px 14px rgba(5,43,115,.16);
}
.slabcal-blue-ui .wizard .step{
  min-height:48px;
  border:0;
  border-right:1px solid rgba(255,255,255,.24);
  border-radius:0;
  background:transparent;
  color:#fff;
  font-weight:800;
  letter-spacing:.01em;
  transition:.15s ease;
}
.slabcal-blue-ui .wizard .step:hover{
  background:rgba(255,255,255,.10);
}
.slabcal-blue-ui .wizard .step.active{
  background:linear-gradient(180deg,#1f76ef,#0a53d2);
  box-shadow:inset 0 -4px 0 #fff;
}
.slabcal-blue-ui .wizard .step span{
  background:rgba(255,255,255,.16);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}

/* MAIN WORKSPACE */
.slabcal-blue-ui .workspace{
  display:grid;
  grid-template-columns:minmax(0,2.5fr) minmax(315px,.72fr);
  gap:12px;
  align-items:start;
  min-width:0;
}
/* Material, Pricing, and Shop Packet don't use the draw canvas at all, so
   hide it entirely on those steps and let the right panel take the full
   width instead of leaving an empty gap where it used to sit. */
.slabcal-blue-ui .workspace.hide-draw-panel{
  grid-template-columns:1fr;
}
.workspace.hide-draw-panel .left-panel{
  display:none;
}
.slabcal-blue-ui .left-panel,
.slabcal-blue-ui .right-panel{
  min-width:0;
}

.slabcal-blue-ui .left-panel{
  background:#fff;
  border:1px solid var(--sc-line);
  border-radius:var(--sc-radius);
  box-shadow:var(--sc-shadow);
  overflow:hidden;
}

.slabcal-blue-ui .panel-title{
  background:linear-gradient(180deg,#f9fbff,#eef4ff);
  border-bottom:1px solid #cbd8ec;
  padding:10px 12px;
}
.slabcal-blue-ui .panel-title h2{
  color:var(--sc-blue-dark);
  margin:0;
}
.slabcal-blue-ui .panel-title p{
  color:var(--sc-muted);
  margin:4px 0 0;
}

/* TOOLBAR */
.slabcal-blue-ui .toolbar{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  padding:9px 10px;
  background:#fff;
  border-bottom:1px solid #d5e0f0;
}
.slabcal-blue-ui button{
  border-radius:7px;
  min-height:34px;
  border:1px solid var(--sc-blue);
  background:linear-gradient(180deg,#1671ec,#0b56d8);
  color:#fff;
  font-weight:700;
  cursor:pointer;
}
.slabcal-blue-ui button:hover{
  filter:brightness(.98);
  transform:translateY(-1px);
}
.slabcal-blue-ui button.secondary{
  background:#fff;
  color:var(--sc-blue-dark);
  border:1px solid #9bb9ec;
}
.slabcal-blue-ui button.danger{
  background:linear-gradient(180deg,#ee5555,#d93434);
  border-color:#c82d2d;
}
.slabcal-blue-ui #polygonBtn{
  box-shadow:0 0 0 2px rgba(11,86,216,.18);
}
.slabcal-blue-ui .angle-snap-group{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  margin:-2px 0 8px;
  background:var(--sc-blue-soft);
  border:1px solid var(--sc-line);
  border-radius:9px;
}
.angle-snap-label{
  font-size:.76rem;
  font-weight:800;
  color:var(--sc-muted);
  letter-spacing:.03em;
  margin-right:2px;
}
.angle-snap-btn{
  min-height:28px;
  padding:4px 12px;
  border-radius:999px;
  font-size:.8rem;
  font-weight:750;
  background:#fff;
  color:var(--sc-blue-dark);
  border:1px solid #9bb9ec;
  cursor:pointer;
}
.angle-snap-btn.active{
  background:linear-gradient(180deg,#1671ec,#0b56d8);
  color:#fff;
  border-color:var(--sc-blue);
}
.angle-snap-custom{
  width:82px;
  min-height:28px;
  padding:4px 8px;
  border-radius:999px;
  font-size:.8rem;
  border:1px solid #9bb9ec;
}

/* Touch-friendly drawing controls: zoom, finish shape, undo point.
   Sized to the ~44px minimum recommended tap-target height so they're
   reliable to hit with a finger, not just a mouse cursor. */
.touch-toolbar{
  align-items:center;
}
.slabcal-blue-ui .touch-toolbar{
  background:var(--sc-blue-soft);
  border-bottom:1px solid var(--sc-line);
}
.touch-btn{
  min-height:44px;
  padding:8px 16px;
  font-size:.88rem;
}
.touch-btn-icon{
  min-width:44px;
  padding:8px;
  font-size:1.15rem;
  font-weight:800;
  line-height:1;
}
.touch-toolbar-spacer{
  flex:1;
  min-width:8px;
}
@media(max-width:700px){
  .touch-toolbar-spacer{flex-basis:100%;height:0;min-width:0}
}

/* DRAWING */
.slabcal-blue-ui .drawing-toolbar-strip{
  display:flex;
  justify-content:space-between;
  align-items:center;
  min-height:35px;
  padding:7px 10px;
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  color:#fff;
  font-weight:800;
  font-size:.78rem;
  letter-spacing:.03em;
}
.slabcal-blue-ui .drawing-strip-center{
  font-weight:600;
  opacity:.9;
}
.slabcal-blue-ui .drawing-wrap{
  background:
    linear-gradient(#edf2f8 1px,transparent 1px),
    linear-gradient(90deg,#edf2f8 1px,transparent 1px),
    #fff;
  background-size:20px 20px;
  min-height:650px;
}
.slabcal-blue-ui #drawing{
  display:block;
  width:100%;
  max-width:100%;
}
.slabcal-blue-ui .drawing-key{
  padding:7px 10px;
  border-top:1px solid #d9e2ef;
  background:#f9fbfe;
}

/* RIGHT PANEL / STAGES */
.slabcal-blue-ui .right-panel{
  display:block;
}
.slabcal-blue-ui .right-panel .stage{
  background:#fff;
  border:1px solid var(--sc-line);
  border-radius:var(--sc-radius);
  padding:12px;
  box-shadow:var(--sc-shadow);
  overflow:hidden;
}
.slabcal-blue-ui .right-panel .stage h2{
  margin:-12px -12px 12px;
  padding:9px 12px;
  color:#fff;
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  font-size:1rem;
  letter-spacing:.01em;
}
.slabcal-blue-ui .right-panel .stage h3{
  color:var(--sc-blue-dark);
  border-bottom:1px solid #d8e3f2;
  padding-bottom:5px;
}

/* MATERIAL CHECK */
.slabcal-blue-ui .draw-material-check{
  margin:0 0 12px;
  padding:0;
  border:1px solid var(--sc-line);
  border-radius:10px;
  overflow:hidden;
  background:#fff;
}
.slabcal-blue-ui .material-smart-view{
  padding:0;
}
.slabcal-blue-ui .material-smart-view > .quote-material-header{
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  color:#fff;
  padding:10px 12px;
  margin:0;
}
.slabcal-blue-ui .material-smart-view > .quote-material-header h2{
  color:#fff;
}
.slabcal-blue-ui .quote-material-inputs,
.slabcal-blue-ui .material-metrics,
.slabcal-blue-ui .material-check-actions,
.slabcal-blue-ui .material-layout-card{
  margin-left:10px;
  margin-right:10px;
}
.slabcal-blue-ui .quote-material-inputs{
  padding-top:10px;
}
.slabcal-blue-ui .quote-material-inputs label{
  color:var(--sc-blue-dark);
  font-weight:800;
}
.slabcal-blue-ui .quote-material-inputs input{
  border:1px solid #9db6dd;
  border-radius:6px;
  background:#fbfdff;
}
.slabcal-blue-ui .material-check-actions button:first-child{
  background:linear-gradient(180deg,#1570ec,#0a55d4);
  box-shadow:0 3px 8px rgba(11,86,216,.18);
}
.slabcal-blue-ui .material-check-result.pass{
  border-color:#8cc7a4;
  background:#f1fbf5;
}
.slabcal-blue-ui .material-check-result.fail{
  border-color:#e39898;
  background:#fff4f4;
}

/* ADVANCED NESTING */
.slabcal-blue-ui .material-advanced-view{
  background:#f5f8fc;
  padding:10px;
}
.slabcal-blue-ui .advanced-inline-header{
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  color:#fff;
  border-radius:9px;
  padding:10px 12px;
  border:0;
}
.slabcal-blue-ui .advanced-inline-header h2{
  color:#fff;
}
.slabcal-blue-ui .advanced-inline-toolbar{
  background:#fff;
  border:1px solid var(--sc-line);
  border-radius:9px;
  padding:8px;
  margin:9px 0;
}
.slabcal-blue-ui .advanced-piece-panel,
.slabcal-blue-ui .advanced-canvas-panel{
  background:#fff;
  border-radius:10px;
}
.slabcal-blue-ui .advanced-canvas-wrap{
  border:2px solid #9eb6da;
  background:#f3f6fa;
}

/* EDGES / POPUPS */
.slabcal-blue-ui .edge-popup,
.slabcal-blue-ui .inline-dim-editor{
  border:1px solid var(--sc-blue);
  box-shadow:0 8px 24px rgba(5,43,115,.18);
}
.slabcal-blue-ui .edge-popup-title{
  color:var(--sc-blue-dark);
  font-weight:800;
}

/* FORM CONTROLS */
.slabcal-blue-ui input,
.slabcal-blue-ui select{
  border:1px solid #a9bddc;
  border-radius:6px;
  background:#fff;
  color:var(--sc-text);
  outline:none;
}
.slabcal-blue-ui input:focus,
.slabcal-blue-ui select:focus{
  border-color:var(--sc-blue);
  box-shadow:0 0 0 3px rgba(11,86,216,.12);
}

/* PRICING */
.slabcal-blue-ui .pricing-summary{
  border:1px solid #cbd9ed;
  border-radius:10px;
  padding:8px;
  background:#f9fbff;
}
.slabcal-blue-ui .pricing-summary .q.total{
  color:var(--sc-blue-dark);
  font-size:1.05rem;
  border-top:2px solid var(--sc-blue);
  padding-top:8px;
}
.slabcal-blue-ui .custom-entry{
  background:#f7faff;
  border:1px solid #d3dff0;
  border-radius:8px;
  padding:7px;
}

/* PROJECT MENU */
.slabcal-blue-ui .project-menu{
  border:1px solid #9eb8e4;
  border-radius:9px;
  box-shadow:0 14px 32px rgba(5,43,115,.20);
}
.slabcal-blue-ui .project-menu-title{
  color:var(--sc-blue-dark);
  font-weight:900;
}

/* STATUS BAR */
.slabcal-blue-ui .status-bar{
  margin:12px 14px 0;
  padding:9px 12px;
  background:linear-gradient(90deg,var(--sc-blue-dark),var(--sc-blue));
  color:#fff;
  border:0;
  border-radius:9px 9px 0 0;
  box-shadow:0 -2px 10px rgba(5,43,115,.10);
}
.slabcal-blue-ui .status-bar b,
.slabcal-blue-ui .status-total{
  color:#fff;
}

/* FOOTER */
.slabcal-footer{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:12px;
  background:linear-gradient(90deg,var(--sc-blue-deep),var(--sc-blue));
  color:#fff;
  padding:10px 18px;
  font-size:.78rem;
  border-top:1px solid rgba(255,255,255,.25);
}
.slabcal-footer > div:last-child{text-align:right}
.slabcal-footer .footer-tagline{
  font-style:italic;
  font-weight:800;
  font-size:.9rem;
}

/* Scrollbars */
.slabcal-blue-ui ::-webkit-scrollbar{width:10px;height:10px}
.slabcal-blue-ui ::-webkit-scrollbar-thumb{background:#9fb7da;border-radius:10px}
.slabcal-blue-ui ::-webkit-scrollbar-track{background:#eef3f9}

/* Responsive */
@media(max-width:1200px){
  .slabcal-blue-ui .topbar{min-height:125px}
  .slabcal-blue-ui .slabcal-brand img{
    width:min(820px,68vw) !important;
    max-height:105px !important;
  }
  .slabcal-blue-ui .workspace{
    grid-template-columns:minmax(0,2fr) minmax(285px,.8fr);
  }
}
@media(max-width:980px){
  .slabcal-blue-ui .topbar{
    flex-direction:column;
    align-items:stretch;
  }
  .slabcal-blue-ui .slabcal-brand img{
    width:min(760px,96vw) !important;
  }
  .slabcal-blue-ui .top-actions{justify-content:flex-start}
  .slabcal-blue-ui .project-strip{grid-template-columns:1fr 1fr}
  .slabcal-blue-ui .wizard{grid-template-columns:repeat(3,1fr)}
  /* The "Project ▾" button ends up near the left edge of the screen once
     the topbar stacks, but the dropdown is anchored with right:0 at a
     fixed 225px width — meaning it extends leftward from the button and
     runs off the left edge of the viewport whenever there isn't 225px of
     room to its left. Anchor it from the left instead, where there's
     actually room, and cap its width so it can never overflow either
     edge regardless of exactly where the button lands. */
  .project-menu{
    left:0;
    right:auto;
    max-width:calc(100vw - 32px);
  }
  /* A leftover base-theme rule (.right-panel{order:-1}) pushes the right
     panel — Material Check / slab layout, pricing, etc. — above the draw
     area once the layout drops to a single column below 820px. Cancel it
     here so the natural order holds: draw area first, everything else
     after it, matching reading/workflow order. */
  .slabcal-blue-ui .right-panel{order:0}
  /* The draw area's own wrapping panel has an unscoped 720px min-height
     left over from the base theme. The canvas itself already scales its
     displayed height to match its width (it keeps its real aspect ratio),
     so on a narrow phone screen the canvas renders far shorter than 720px
     — the panel was just being stretched to fill that height anyway,
     leaving a large dead, non-interactive gap below the actual drawing
     surface. Let the panel hug its real content on mobile instead. */
  .slabcal-blue-ui .left-panel{min-height:0}
  .slabcal-blue-ui .workspace{grid-template-columns:1fr}
}
@media(max-width:650px){
  .slabcal-blue-ui .project-strip{grid-template-columns:1fr}
  .slabcal-blue-ui .wizard{grid-template-columns:1fr 1fr}
  .slabcal-footer{grid-template-columns:1fr;text-align:center}
  .slabcal-footer > div:last-child{text-align:center}
}



/* =========================================================
   SLABCAL BLUE DASHBOARD V2
   Wider logo + compact Material Check controls
   ========================================================= */

/* Logo: approximately 3x the prior visual width.
   Allow it to span nearly the entire header width. */
.slabcal-blue-ui .topbar{
  display:block !important;
  min-height:0 !important;
  padding:8px 14px 10px !important;
}
.slabcal-blue-ui .slabcal-brand{
  width:100% !important;
  max-width:none !important;
  overflow:hidden;
}
.slabcal-blue-ui .slabcal-brand img{
  width:216vw !important;
  max-width:none !important;
  height:132px !important;
  max-height:132px !important;
  object-fit:contain !important;
  object-position:left center !important;
  transform-origin:left center;
}

/* Keep project controls below the enlarged logo rather than fighting for width. */
.slabcal-blue-ui .top-actions{
  margin-top:5px;
  width:100%;
  justify-content:flex-end;
  padding-top:0;
}

/* Compact Material Check controls ONLY.
   Do not shrink Slab Layout / automatic layout drawing area. */
.slabcal-blue-ui .draw-material-check .quote-material-header{
  padding:7px 10px !important;
}
.slabcal-blue-ui .draw-material-check .quote-material-header h2{
  font-size:.95rem !important;
  margin:0 !important;
}
.slabcal-blue-ui .draw-material-check .quote-material-inputs{
  padding-top:6px !important;
  margin:0 8px !important;
  gap:4px 7px !important;
}
.slabcal-blue-ui .draw-material-check .quote-material-inputs label{
  font-size:.72rem !important;
  line-height:1.05 !important;
  margin:0 !important;
}
.slabcal-blue-ui .draw-material-check .quote-material-inputs input{
  min-height:26px !important;
  height:26px !important;
  padding:2px 5px !important;
  font-size:.78rem !important;
}
.slabcal-blue-ui .draw-material-check .material-check-actions{
  margin:6px 8px !important;
  gap:5px !important;
}
.slabcal-blue-ui .draw-material-check .material-check-actions button{
  min-height:29px !important;
  padding:4px 7px !important;
  font-size:.73rem !important;
}
.slabcal-blue-ui .draw-material-check .material-metrics{
  margin:5px 8px !important;
  gap:4px !important;
  font-size:.73rem !important;
}
.slabcal-blue-ui .draw-material-check .material-check-result{
  padding:6px 8px !important;
  margin:5px 8px !important;
  font-size:.74rem !important;
}

/* Slab Layout intentionally remains roomy/full-width. */
.slabcal-blue-ui .draw-material-check .material-layout-card{
  margin:8px !important;
  width:auto !important;
  max-width:none !important;
}
.slabcal-blue-ui .draw-material-check .material-layout-card canvas,
.slabcal-blue-ui .draw-material-check #slabCanvas{
  width:100% !important;
  max-width:none !important;
}

/* Responsive logo remains dramatically wider while fitting its viewport crop. */
@media(max-width:1200px){
  .slabcal-blue-ui .slabcal-brand img{
    width:216vw !important;
    height:112px !important;
    max-height:112px !important;
  }
}
@media(max-width:800px){
  .slabcal-blue-ui .slabcal-brand img{
    width:216vw !important;
    height:92px !important;
    max-height:92px !important;
  }
}

.slabcal-blue-ui .slabcal-brand{
  height:132px !important;
}
.slabcal-blue-ui .slabcal-brand img{
  width:72vw !important;
  transform:scaleX(3) !important;
}
@media(max-width:1200px){
  .slabcal-blue-ui .slabcal-brand{height:112px !important}
  .slabcal-blue-ui .slabcal-brand img{width:68vw !important}
}
@media(max-width:800px){
  .slabcal-blue-ui .slabcal-brand{height:92px !important}
  .slabcal-blue-ui .slabcal-brand img{width:72vw !important}
}


/* V2 Clear Logo correction — preserve natural aspect ratio */
.slabcal-blue-ui .topbar{
  display:flex !important;
  align-items:center !important;
  min-height:125px !important;
  padding:8px 16px 10px !important;
}
.slabcal-blue-ui .slabcal-brand{
  flex:1 1 auto !important;
  width:auto !important;
  height:auto !important;
  overflow:visible !important;
}
.slabcal-blue-ui .slabcal-brand img{
  transform:none !important;
  width:min(980px,72vw) !important;
  height:auto !important;
  max-width:100% !important;
  max-height:115px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
.slabcal-blue-ui .top-actions{
  width:auto !important;
  margin-top:0 !important;
  flex:0 0 auto !important;
}
@media(max-width:980px){
  .slabcal-blue-ui .topbar{display:block !important}
  .slabcal-blue-ui .slabcal-brand img{
    width:min(900px,96vw) !important;
    max-height:105px !important;
  }
  .slabcal-blue-ui .top-actions{
    width:100% !important;
    margin-top:5px !important;
    justify-content:flex-start !important;
  }
}


/* Safe Material Check cleanup.
   Keep metric IDs in DOM for JavaScript, but hide the visual boxes. */
.draw-material-check .material-metrics{
  display:none !important;
}

/* Hide Project Drawing heading/instructions while preserving JS state elements. */
.project-drawing-state-hidden{
  display:none !important;
}
.drawing-toolbar-strip{
  justify-content:flex-end !important;
}
.drawing-toolbar-strip .drawing-strip-left:empty{
  display:none !important;
}


/* SlabCal logo 2x enlargement — preserve sharpness and aspect ratio */
.slabcal-blue-ui .topbar{
  min-height:220px !important;
  align-items:center !important;
}
.slabcal-blue-ui .slabcal-brand img{
  transform:none !important;
  width:min(1600px,82vw) !important;
  height:auto !important;
  max-width:100% !important;
  max-height:205px !important;
  object-fit:contain !important;
  object-position:left center !important;
}
@media(max-width:980px){
  .slabcal-blue-ui .topbar{
    min-height:180px !important;
  }
  .slabcal-blue-ui .slabcal-brand img{
    width:min(1400px,96vw) !important;
    max-height:165px !important;
  }
}

@media screen and (max-width: 600px) {
  .quote-button-wrapper {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff; /* Matches your background */
    padding: 12px;
    box-shadow: 0 -4px 10px rgba(0, 0, 0, 0.1); /* Subtle shadow above the bar */
    z-index: 999; /* Keeps it on top of other content */
  }

  .quote-btn {
    display: block;
    width: 100%;
    padding: 14px;
    text-align: center;
    border-radius: 6px;
  }
}