/* ── Walls & Openings ─────────────────────────────────────────────────── */
.wall-corner{stroke:#2a2520;stroke-width:1}
.room-floor{fill:#fdf9f3}
.opening-bg{fill:#fdf9f3;stroke:none}
.opening-glass{stroke:#4488bb;stroke-width:1.5;fill:none}
.door-panel{stroke:#2a2520;stroke-width:2;stroke-linecap:round}
.door-arc{stroke:#2a2520;stroke-width:1;fill:none;stroke-dasharray:4 3}
.door-threshold{stroke:#aaa;stroke-width:1;stroke-dasharray:2 2}
.opening-label{font-size:9px;fill:#2255aa;font-family:Inter,Arial,sans-serif;font-weight:600}
.opening.selected-opening .opening-glass{stroke:#1166ff}
.opening.selected-opening .door-panel{stroke:#1166ff}
.opening.selected-opening .door-arc{stroke:#1166ff}
.opening.selected-opening .opening-bg{fill:#e8f0ff;stroke:#4488ff;stroke-width:1}
.opening{cursor:pointer}
/* ── Surfaces & Fixtures ──────────────────────────────────────────────── */
.sink-basin{fill:#a0c0da;stroke:#5070a0;stroke-width:1.2}
.cooktop-label{font-size:9px;fill:#ccc;font-family:Inter,Arial,sans-serif;font-weight:600;text-anchor:middle}
.cooktop-strip{fill:#333}
/* marble vein overlaid on pattern */
.marble-vein{stroke:#c0b0a0;stroke-width:1;fill:none;opacity:.7}
/* ── NEW: Windows & Doors UI styles ─────────────────────────────────── */
.opening-btns{display:flex;gap:8px;margin-bottom:10px}
.opening-add-btn{flex:1;background:#f0f7ff;border-color:#b8cfe8;color:#1a4a7a;font-size:13px;padding:10px 8px;border-radius:10px}
.opening-add-btn:hover{background:#dceeff}
.opening-type-badge{display:inline-block;background:#1a4a7a;color:white;border-radius:8px;padding:3px 12px;font-size:12px;font-weight:700;margin-bottom:10px;letter-spacing:.5px}
/* ── BASE ──────────────────────────────────────────────────────────────── */
*{box-sizing:border-box}body{margin:0;font-family:Inter,Arial,sans-serif;background:#f4f1ea;color:#24211d}button,input,select{font:inherit}button{border:0;background:#fff;border:1px solid #d7d0c6;border-radius:10px;padding:9px 12px;cursor:pointer;color:#2b2722}button:hover{background:#faf7f1}.primary{background:#2f6f5e;color:white;border-color:#2f6f5e}.primary:hover{background:#265b4d}#exportPlanBtn{background:#e86c00;color:#fff;border-color:#c75a00;font-weight:800}#exportPlanBtn:hover{background:#c75a00}.danger{background:#fff1f1;border-color:#e5b8b8;color:#9d1f1f}.big{font-size:18px;padding:13px 22px}.hidden{display:none!important}.topbar{height:70px;background:#fffdf8;border-bottom:1px solid #ded7cd;display:flex;align-items:center;justify-content:space-between;padding:0 18px;gap:20px;position:sticky;top:0;z-index:10}.brand{display:flex;align-items:center;gap:12px;min-width:240px}.brand span{display:block;font-size:12px;color:#7a7168}.logo{width:42px;height:42px;border-radius:14px;background:#2f6f5e;color:white;display:grid;place-items:center;font-weight:800}.toolbar{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}.toolbar button.active{outline:2px solid #2f6f5e}.setup-panel{max-width:900px;margin:55px auto;background:#fffdf8;border:1px solid #ded7cd;border-radius:24px;padding:34px;box-shadow:0 18px 60px rgba(55,40,20,.12)}.setup-panel h1{margin:0 0 8px;font-size:34px}.setup-panel p{color:#6f665d}.setup-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:28px 0}.setup-grid label,.editor label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#5f574f}.setup-grid input,.editor input,.editor select{border:1px solid #d4ccc1;border-radius:10px;padding:10px;background:white}.designer{display:grid;grid-template-columns:260px 1fr 280px;height:calc(100vh - 70px)}.left-panel,.right-panel{background:#fffdf8;border-right:1px solid #ded7cd;padding:16px;overflow:auto}.right-panel{border-right:0;border-left:1px solid #ded7cd}.left-panel h2,.right-panel h2{font-size:16px;margin:5px 0 14px}.workspace{display:flex;flex-direction:column;min-width:0}.view-header{height:48px;background:#fcfaf5;border-bottom:1px solid #ded7cd;display:flex;align-items:center;justify-content:space-between;padding:0 15px;color:#62594f}.view-header strong{color:#211e1b}.view-header span{margin-left:8px;font-size:13px}.canvas-wrap,.three-wrap{position:relative;flex:1;min-height:0;overflow:auto;background:linear-gradient(45deg,#f9f6ef 25%,transparent 25%),linear-gradient(-45deg,#f9f6ef 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#f9f6ef 75%),linear-gradient(-45deg,transparent 75%,#f9f6ef 75%);background-size:26px 26px;background-position:0 0,0 13px,13px -13px,-13px 0}#planSvg{display:block;margin:35px auto;background:#fffdf8;border-radius:14px;box-shadow:0 12px 34px rgba(55,40,20,.12)}.library-group{margin-bottom:16px}.library-title{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#857a70;margin:10px 0 8px}.lib-item{width:100%;text-align:left;margin-bottom:7px;padding:10px;border-radius:12px;background:#fff;border:1px solid #ddd5ca}.lib-item strong{display:block;font-size:13px}.lib-item span{font-size:12px;color:#7a7168}.hint{background:#f3eadf;border:1px solid #e0d4c8;border-radius:14px;padding:12px;margin-top:16px;font-size:13px;line-height:1.4;color:#63584f}.small{font-size:12px}.empty{padding:18px;border:1px dashed #c8beb2;border-radius:14px;color:#7a7168;background:#faf6ef}.editor{display:flex;flex-direction:column;gap:12px}.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:10px}.button-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.summary{font-size:13px;line-height:1.55;color:#655c53}.cabinet{cursor:move}.cabinet.selected rect.body{stroke:#2f6f5e;stroke-width:3}.body.collision{stroke:#c62828!important;stroke-width:3!important}.snap-guide{stroke:#2f6fdf;stroke-width:2;stroke-dasharray:8 6;pointer-events:none}.dim-label{font-size:12px;fill:#5d554d}.area-label{font-size:14px;font-weight:800;fill:#2f6f5e;paint-order:stroke;stroke:#fffdf8;stroke-width:4px;stroke-linejoin:round;pointer-events:none}.item-label{font-size:13px;fill:#2a2622;font-weight:700;pointer-events:none}.gridline{stroke:#eee5da;stroke-width:1}.room-wall{fill:#fffdf8;stroke:#38322c;stroke-width:4}.wall-shadow{fill:none;stroke:#c5b8aa;stroke-width:10;opacity:.3}.handle{fill:#2f6f5e;stroke:#fff;stroke-width:2;cursor:nwse-resize}.three-wrap canvas{display:block;width:100%!important;height:100%!important}@media(max-width:900px){.designer{grid-template-columns:1fr;height:auto}.left-panel,.right-panel{border:0;border-bottom:1px solid #ded7cd}.workspace{height:70vh}.setup-grid{grid-template-columns:1fr}.topbar{height:auto;align-items:flex-start;flex-direction:column;padding:12px}.toolbar{justify-content:flex-start}.designer{height:auto}}

/* ── Colour swatches ───────────────────────────────────────────────────── */
.swatch-bar{display:flex;flex-wrap:wrap;gap:5px;margin:2px 0 6px}
.swatch{display:inline-block;width:22px;height:22px;border-radius:6px;border:2px solid rgba(0,0,0,.12);cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.18);transition:transform .1s,border-color .1s}
.swatch:hover{transform:scale(1.18)}
.swatch-active{border-color:#2f6f5e!important;box-shadow:0 0 0 2.5px #2f6f5e}

/* ── Editor label helpers ─────────────────────────────────────────────── */
.editor-label{display:flex;flex-direction:column;gap:5px;font-size:12px;font-weight:700;color:#5f574f}
.editor-label input,.editor-label select{border:1px solid #d4ccc1;border-radius:8px;padding:8px;background:white;width:100%;font:inherit;font-size:13px}
.rot-preset{flex:1 1 60px;min-width:48px;padding:6px 4px;border:1px solid #d4ccc1;border-radius:6px;background:#f6f1ea;color:#5f574f;font:inherit;font-size:11px;font-weight:600;cursor:pointer}
.rot-preset:hover{background:#ebe2d4;border-color:#a89d8d}
.rot-preset:active{background:#dccfb8}

/* ── Two-col grid for narrow right panel ─────────────────────────────── */
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.two-cols .editor-label input{padding:7px 6px;font-size:12px}

/* ── Setup: Shape picker & free-form designer ────────────────────────── */
.shape-picker{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0 14px;padding:12px;background:#f7f3eb;border-radius:14px;border:1px solid #e3dccf}
.shape-btn{flex:1;min-width:130px;padding:14px 8px;font-size:14px;font-weight:600;background:white;border:2px solid #d7d0c6;border-radius:10px;cursor:pointer;transition:all .12s}
.shape-btn:hover{background:#fdfaf3}
.shape-btn.active{background:#2f6f5e;color:white;border-color:#2f6f5e}
.shape-params{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 16px;padding:14px;background:#fffdf8;border:1px solid #ded7cd;border-radius:12px}
.shape-params label{display:flex;flex-direction:column;gap:7px;font-size:13px;font-weight:700;color:#5f574f}
.shape-params input{border:1px solid #d4ccc1;border-radius:10px;padding:10px;background:white;font:inherit}
.freeform-help{grid-column:1/-1;color:#6f665d;font-size:13px;margin-bottom:6px}
.freeform-row{grid-column:1/-1;display:grid;grid-template-columns:1fr 220px;gap:16px}
.freeform-canvas-wrap{background:#fff;border:1px solid #e0d8cc;border-radius:10px;overflow:hidden;min-height:380px}
#freeformCanvas{display:block;width:100%;height:380px;cursor:crosshair;background:#fcfaf5}
.freeform-side{display:flex;flex-direction:column;gap:10px}
.freeform-toolbar{display:flex;gap:6px}
.freeform-toolbar button{flex:1;padding:8px;font-size:12px}
.freeform-vertices{flex:1;max-height:340px;overflow:auto;border:1px solid #e0d8cc;border-radius:10px;padding:8px;background:#fffdf8;font-size:12px}
.freeform-vertex-row{display:grid;grid-template-columns:18px 1fr 1fr 22px;gap:4px;align-items:center;margin-bottom:4px}
.freeform-vertex-row .idx{font-weight:700;color:#7a7168;text-align:center}
.freeform-vertex-row input{width:100%;border:1px solid #d4ccc1;border-radius:6px;padding:4px 6px;font-size:11px}
.freeform-vertex-row .rm{background:#fee;border:1px solid #ecc;border-radius:5px;cursor:pointer;font-size:11px;padding:2px 4px;color:#a44}
.freeform-vertex-empty{color:#a09689;font-style:italic;padding:8px;text-align:center}
.ff-pt{fill:#2f6f5e;stroke:white;stroke-width:1.5;cursor:grab}
.ff-pt-first{fill:#d09030}
.ff-pt-active{fill:#1f4f42;stroke-width:2.5;cursor:grabbing}
.ff-len{fill:#2f6f5e;font-size:11px;font-weight:700;paint-order:stroke;stroke:white;stroke-width:3px;stroke-linejoin:round}
.ff-len-live{fill:#c0392b}
.ff-preview-line{stroke:#c0392b;stroke-width:1.5;stroke-dasharray:5 4;opacity:.85}
.ff-line{stroke:#2f6f5e;stroke-width:2;fill:none}
.ff-fill{fill:rgba(47,111,94,.10);stroke:#2f6f5e;stroke-width:2}
.ff-grid{stroke:#eee5d6;stroke-width:.5}
.ff-axis{stroke:#c4b8a0;stroke-width:1}
.ff-label{font-size:10px;fill:#7a7168;font-family:Inter,Arial,sans-serif}

/* ── Wall graph: free walls, vertex handles, draw preview ─────────── */
.free-wall{stroke:#5a4a3a;stroke-width:8;stroke-linecap:round;cursor:pointer}
.free-wall:hover{stroke:#1166ff}
.free-wall.selected-wall{stroke:#1166ff;stroke-width:9}
.room-edge-hot{stroke:transparent;stroke-width:14;cursor:pointer;fill:none}
.room-edge-hot:hover + .room-edge-vis,
.room-edge-hot.selected-wall + .room-edge-vis{stroke:#1166ff}
.room-edge-vis{stroke:transparent;stroke-width:2;fill:none;pointer-events:none}
.vertex-handle{fill:#2f6f5e;stroke:#fff;stroke-width:2;cursor:grab;r:7}
.vertex-handle:hover{fill:#1166ff;r:8.5}
.vertex-handle.dragging{cursor:grabbing;fill:#1166ff}
.vertex-handle.weld-target{fill:#ff8a00;stroke:#fff;stroke-width:3}
.vertex-handle.selected-vertex{fill:#d09030;r:9}
.vertex-handle.multi-sel-vertex{fill:#f0a020;stroke:#fff;stroke-width:2.5}
.weld-ring{fill:none;stroke:#ff8a00;stroke-width:2.5;stroke-dasharray:3 2}
.draw-preview{stroke:#2f6f5e;stroke-width:6;stroke-dasharray:8 6;stroke-linecap:round;opacity:.8;pointer-events:none}
.draw-preview-len{fill:#2f6f5e;font-weight:700;font-size:14px;font-family:Inter,Arial,sans-serif;pointer-events:none}
.wall-len-label{fill:#7a4a6a;font-size:11px;font-weight:700;font-family:Inter,Arial,sans-serif;pointer-events:none}
.room-floor{cursor:pointer}
.room-floor.selected-room{fill:#fff4d8;stroke:#2f6f5e;stroke-width:2;stroke-dasharray:6 4}
.draw-mode-active #planSvg{cursor:crosshair}
#drawWallBtn.active{background:#2f6f5e;color:#fff;border-color:#2f6f5e}
.freeform-edge-row{display:grid;grid-template-columns:22px 1fr 70px;gap:6px;align-items:center;margin-bottom:4px;font-size:12px}
.freeform-edge-row input{border:1px solid #d4ccc1;border-radius:6px;padding:4px 6px;font-size:11px;width:100%}
.freeform-edge-row .lbl{font-weight:700;color:#7a7168;text-align:center}
/* ── Extra shapes ───────────────────────────────────────────────────── */
.add-shape-wrap{position:relative;display:inline-block}
.shape-dropdown{position:absolute;top:calc(100% + 4px);left:0;background:#fff;border:1px solid #d0c8bc;border-radius:10px;padding:6px;z-index:200;min-width:160px;box-shadow:0 6px 20px rgba(0,0,0,0.15)}
.shape-dropdown button[data-kind]{display:block;width:100%;text-align:left;padding:9px 14px;border:none;background:none;cursor:pointer;border-radius:7px;font-size:13px;color:#3a3228}
.shape-dropdown button[data-kind]:hover{background:#f0ece4}
.combine-btn{background:#4a7ab5!important;color:#fff!important;border-color:#3a6aa5!important}
.combine-btn:hover{background:#3a6aa5!important}
.extra-shape-outline{fill:rgba(80,130,200,0.10);stroke:#4a80c0;stroke-width:2.5;cursor:pointer;stroke-linejoin:round}
.extra-shape-outline:hover{stroke:#1166ff;stroke-width:3;fill:rgba(80,130,200,0.18)}
.extra-shape-outline.selected-shape{stroke:#1166ff;stroke-width:3.5;fill:rgba(80,130,200,0.22)}
.extra-vertex{fill:#4a80c0;stroke:#fff;stroke-width:2;cursor:grab;r:7}
.extra-vertex:hover{fill:#1166ff;r:9}
.shape-scale-handle{fill:#e07020;stroke:#fff;stroke-width:1.5;cursor:nwse-resize}
.shape-scale-handle:hover{fill:#ff8800}
.shape-rotate-handle{fill:#2a9a5e;stroke:#fff;stroke-width:2;cursor:crosshair}
.shape-rotate-handle:hover{fill:#22bb77}
.shape-rotate-line{stroke:#2a9a5e;stroke-width:1.5;stroke-dasharray:4 3;pointer-events:none}

/* ── Collapsible left-panel sections ────────────────────────────────── */
.panel-section{border-bottom:1px solid #e8e0d4;margin-bottom:0}
.section-toggle{width:100%;text-align:left;background:none;border:none;border-radius:0;padding:10px 4px;font-size:14px;font-weight:700;color:#3a3228;cursor:pointer;display:flex;justify-content:space-between;align-items:center}
.section-toggle:hover{background:#f4f0ea;color:#1a1610}
.sec-arrow{font-size:11px;color:#7a7168;transition:transform .15s}
.section-body{padding:4px 0 10px}
.section-body.collapsed{display:none}

/* ── Remark / sticky-note bubbles ───────────────────────────────────── */
.remark-circle{fill:#f5c518;stroke:#b8960e;stroke-width:1.5}
.selected-remark .remark-circle{fill:#ffe066;stroke:#2f6f5e;stroke-width:2.5}
.remark-icon{font-size:12px;fill:#5a4800;text-anchor:middle;pointer-events:none}
.remark-box{fill:#fffde8;stroke:#d4b800;stroke-width:1;rx:4}
.remark-text{font-size:10px;fill:#3a3000;font-family:Inter,Arial,sans-serif;pointer-events:none}

/* ── Label show/hide ────────────────────────────────────────────────── */
.hide-labels .item-label,.hide-labels .dim-label,.hide-labels .wall-len-label,
.hide-labels .opening-label,.hide-labels .draw-preview-len,.hide-labels .area-label{display:none!important}
.hide-remarks .remark{display:none!important}
.autosave-banner{display:flex;align-items:center;gap:10px;background:#fff7ed;border:1px solid #f59e0b;border-radius:14px;padding:12px 16px;margin-bottom:20px;font-size:14px;font-weight:600;color:#92400e}
.autosave-banner span{flex:1}

/* ── Freeform vertex row: X/Y labels ───────────────────────────────── */
.freeform-vertex-row{display:grid;grid-template-columns:18px auto 1fr auto 1fr 22px;gap:4px;align-items:center;margin-bottom:4px}
.axis-lbl{font-size:10px;font-weight:800;color:#7a7168;text-align:center}

/* ── View-header spacing fix ────────────────────────────────────────── */
.view-header{display:flex;align-items:center;gap:8px;padding:6px 14px;border-bottom:1px solid #e8e0d4;background:#fffdf8;min-height:40px}

/* -- Button row (delete + lock side by side) -------------------------------- */
.button-row{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
.button-row .danger{min-width:0}

/* -- Lock button ------------------------------------------------------------ */
.lock-btn{background:#f7f3eb;border:1px solid #d7d0c6;border-radius:8px;padding:7px 10px;font-size:12px;cursor:pointer;white-space:nowrap;color:#4a4030}
.lock-btn:hover{background:#ede9e0}
.lock-btn-locked{background:#fff4e0;border-color:#e8c870;color:#7a5500}
.lock-btn-locked:hover{background:#ffedc0}

/* -- Editor title row (badge + lock) --------------------------------------- */
.editor-title-row{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px}

/* -- SVG lock overlay ------------------------------------------------------- */
.svg-lock-icon{font-size:13px;pointer-events:none;font-family:sans-serif}

/* -- Items panel (right panel all-items list) ------------------------------- */
.items-search{width:100%;border:1px solid #d4ccc1;border-radius:8px;padding:8px;font-size:12px;margin:6px 0 8px;font-family:inherit;background:#fff}
.items-panel-list{display:flex;flex-direction:column;gap:1px;max-height:400px;overflow-y:auto}
.ip-group-head{display:flex;align-items:center;gap:5px;padding:5px 2px 3px;font-size:11px;font-weight:700;color:#7a7168;text-transform:uppercase;letter-spacing:.4px;margin-top:8px;border-top:1px solid #e8e0d4}
.ip-group-head:first-child{margin-top:0;border-top:none}
.ip-ct{background:#e8e0d4;color:#6a6158;border-radius:10px;padding:0 6px;font-size:10px;font-weight:700;margin-left:auto}
.ip-row{display:flex;align-items:center;gap:4px;padding:5px 4px;border-radius:6px}
.ip-row:hover{background:#f4f0ea}
.ip-row.ip-locked{opacity:.7}
.ip-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;overflow:hidden}
.ip-name{font-size:12px;color:#2b2722;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ip-id{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:10px;color:#9a9089;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:copy}
.ip-id:hover{color:#2f6f5e;text-decoration:underline}
.ip-row:hover .ip-name{color:#2f6f5e}
.ip-copy,.ip-lock{background:none;border:none;cursor:pointer;font-size:12px;padding:2px 4px;border-radius:4px;flex-shrink:0;line-height:1}
.ip-copy:hover,.ip-lock:hover{background:#ece8e0}
.sel-header{background:#f7f3eb;border:1px solid #e0d8cc;border-radius:8px;padding:7px 9px;margin-bottom:10px}
.sel-header-row{display:flex;align-items:center;gap:8px}
.sel-header-label{font-size:10px;font-weight:700;color:#7a7168;text-transform:uppercase;letter-spacing:.4px;flex-shrink:0}
.sel-header-id{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:11px;color:#3a342d;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;cursor:copy}
.sel-header-id:hover{color:#2f6f5e;text-decoration:underline}
.sel-header-copy{background:#fff;border:1px solid #d4ccc1;border-radius:6px;padding:3px 8px;font-size:11px;font-weight:600;cursor:pointer;flex-shrink:0;line-height:1.4}
.sel-header-copy:hover{background:#2f6f5e;color:#fff;border-color:#2f6f5e}
/* ── Room Move button ─────────────────────────────────────────────────── */
.room-move-btn{background:#f7f3eb;border-color:#d0c8bc;color:#4a3d30;font-weight:600;font-size:13px}
.room-move-btn:hover{background:#ece5d8;border-color:#b8ae9e}
.room-move-btn.active{background:#2f6f5e;color:#fff;border-color:#265b4d}