:root{
  --bg:#F5F6F7; --panel:#FFFFFF; --canvas-bg:#EBEDEF;
  --ink:#171A1F; --muted:#69707D; --faint:#98A1AE;
  --line:#E5E8EC; --line-strong:#D4D9DF;
  --accent:#2953D1; --accent-soft:#EDF1FC; --accent-line:#C6D2F3;
  --warn:#B45309; --warn-soft:#FEF3E2;
  --danger:#C0392B; --danger-soft:#FBEAE8; --danger-line:#F0C4BE;
  --tape:#E4007C;  /* measuring tape — deliberately unlike any group colour */
  --radius:8px;
  /* System-font stacks. No web fonts are loaded: the previous Google Fonts
     link (Inter / Space Grotesk) was removed so that the application makes no
     external requests. --font-display keeps the slightly tighter, heavier
     treatment the brand marks and modal titles previously had. */
  --font-ui:system-ui,-apple-system,'Segoe UI',Roboto,'Helvetica Neue','Liberation Sans',Arial,'Noto Sans',sans-serif;
  --font-display:'Segoe UI Variable Display','Segoe UI',system-ui,-apple-system,Roboto,'Helvetica Neue','Liberation Sans',Arial,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,'Liberation Mono',monospace;
  font-size:14px;
}
*{box-sizing:border-box; margin:0; padding:0}
html,body{height:100%; overflow:hidden}
body{
  font-family:var(--font-ui);
  color:var(--ink); background:var(--bg);
  display:flex; flex-direction:column;
  font-feature-settings:'tnum' 1;
}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input,select{font:inherit; color:inherit}
button:focus-visible,input:focus-visible,select:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent); outline-offset:1px; border-radius:4px}
@media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important}}

/* ---------- Toolbar ---------- */
#toolbar{
  height:52px; flex:0 0 52px; background:var(--panel); border-bottom:1px solid var(--line);
  display:flex; align-items:center; gap:8px; padding:0 12px; z-index:20;
}
#logo{font-family:var(--font-display); font-weight:700; font-size:16px; letter-spacing:-.02em; display:flex; align-items:center; gap:7px; padding-right:10px; white-space:nowrap}
#logo .lmark{width:24px;height:24px;flex:0 0 24px}
.tb-sep{width:1px; height:26px; background:var(--line); flex:0 0 1px}
#drawTabs{display:flex; align-items:center; gap:6px; overflow-x:auto; max-width:32vw; scrollbar-width:thin}
.dtab{display:flex; align-items:center; gap:6px; padding:5px 8px 5px 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:var(--muted); white-space:nowrap; max-width:180px; font-size:12.5px}
.dtab span{overflow:hidden; text-overflow:ellipsis}
.dtab.active{border-color:var(--accent-line); background:var(--accent-soft); color:var(--accent); font-weight:600}
.dtab .x{color:var(--faint); font-size:14px; line-height:1; padding:1px 2px; border-radius:3px}
.dtab .x:hover{color:var(--danger); background:#fff}
.tbtn{display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; color:var(--muted); font-weight:500; font-size:13px; border:1px solid transparent}
.tbtn:hover{background:var(--bg)}
.tbtn.primary{background:var(--accent); color:#fff; font-weight:600}
.tbtn.primary:hover{background:#2246B4}
.tbtn svg{width:15px; height:15px; stroke-width:1.8}
#tools{display:flex; gap:2px; background:var(--bg); padding:3px; border-radius:8px}
.tool{display:flex; align-items:center; gap:6px; padding:5px 10px; border-radius:6px; color:var(--muted); font-size:12.5px; font-weight:500}
.tool kbd{font:600 10px var(--font-ui); color:var(--faint); border:1px solid var(--line); border-radius:3px; padding:0 3px; background:#fff}
.tool:hover{color:var(--ink)}
.tool.active{background:#fff; color:var(--accent); font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.08)}
.tool.active kbd{color:var(--accent); border-color:var(--accent-line)}
.tool-sep{width:1px; align-self:stretch; margin:2px 3px; background:var(--line-strong); flex:0 0 1px}
.tool[data-tool="ruler"].active{color:var(--tape)}
.tool[data-tool="ruler"].active kbd{color:var(--tape); border-color:var(--tape)}
.tool svg{width:15px; height:15px; stroke-width:1.8}
#modeTgl{display:flex; gap:2px; background:var(--bg); padding:3px; border-radius:8px}
#modeTgl button{padding:5px 10px; border-radius:6px; font-size:12.5px; font-weight:600; color:var(--muted); white-space:nowrap; border:1px solid transparent}
#modeTgl #modeAdd.on{background:#fff; color:var(--accent); box-shadow:0 1px 2px rgba(16,24,40,.08)}
#modeTgl #modeDeduct{background:var(--danger-soft); color:var(--danger)}
#modeTgl #modeDeduct.on{background:var(--danger-soft); color:var(--danger); border-color:var(--danger-line); box-shadow:0 1px 2px rgba(16,24,40,.08)}
.pdraws{margin:2px 2px; display:flex; flex-direction:column; gap:8px}
.dthumb{display:flex; flex-direction:column; gap:6px; padding:7px; border:1px solid var(--line); border-radius:9px; background:#fff; cursor:pointer; position:relative}
.dthumb:hover{border-color:var(--line-strong)}
.dthumb.active{border-color:var(--accent-line); background:var(--accent-soft)}
.dthumb img{width:100%; height:120px; object-fit:contain; background:var(--canvas-bg); border:1px solid var(--line); border-radius:6px; display:block}
.dthumb .dtrow{display:flex; align-items:center; gap:6px}
.dthumb .dtname{flex:1; font-size:12.5px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0}
.dthumb.active .dtname{color:var(--accent)}
.dthumb .dtmeta{font-size:10.5px; color:var(--faint); white-space:nowrap}
.dthumb .dx{color:var(--faint); font-size:15px; line-height:1; padding:0 4px; border-radius:4px; visibility:hidden; flex:0 0 auto}
.dthumb:hover .dx{visibility:visible}
.dthumb .dx:hover{color:var(--danger); background:var(--bg)}
#addDrawTile{display:flex; align-items:center; justify-content:center; gap:8px; padding:12px; border:1px dashed var(--line-strong); border-radius:9px; color:var(--muted); font-weight:500; font-size:13px; cursor:pointer; margin:2px}
#addDrawTile:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
#addDrawTile svg{width:15px; height:15px; stroke-width:2}
.meas-row .mval.ded{color:var(--danger)}
#zoomCtl{display:flex; align-items:center; gap:2px; margin-left:auto}
/* undo / redo history controls */
#histCtl{display:flex; align-items:center; gap:2px; flex:0 0 auto}
.histbtn{width:30px; height:30px}
.histbtn svg{width:16px; height:16px}
.histbtn:not(:disabled):hover{background:var(--bg); color:var(--accent)}
.histbtn:disabled{opacity:.32; cursor:default}
.histbtn:disabled:hover{background:none; color:var(--muted)}
#zoomCtl button{padding:5px 7px; border-radius:6px; color:var(--muted)}
#zoomCtl button:hover{background:var(--bg); color:var(--ink)}
#zoomPct{min-width:46px; text-align:center; font-size:12.5px; color:var(--muted); font-weight:500}
#zoomRotate.on{color:var(--accent); background:var(--accent-soft)}
#scaleChip{display:flex; align-items:center; gap:7px; padding:6px 11px; border-radius:6px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:600}
#scaleChip .dot{width:7px; height:7px; border-radius:50%}
#scaleChip.ok{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)}
#scaleChip.ok .dot{background:var(--accent)}
#scaleChip.warn{color:var(--warn); border-color:#F3D9B0; background:var(--warn-soft)}
#scaleChip.warn .dot{background:var(--warn)}
#scaleChip:disabled{opacity:.45; cursor:default}

/* ---------- Layout ---------- */
#main{flex:1; display:flex; min-height:0}
aside{background:var(--panel); display:flex; flex-direction:column; min-height:0}
#dimPanel{width:320px; flex:0 0 320px; border-right:1px solid var(--line); position:relative}
#dimResize{position:absolute; top:0; right:-3px; width:6px; height:100%; cursor:col-resize; z-index:15}
#dimResize::after{content:''; position:absolute; top:0; left:2px; width:2px; height:100%; background:transparent; transition:background .12s}
#dimResize:hover::after,#dimResize.dragging::after{background:var(--accent-line)}
#projPanel{width:236px; flex:0 0 236px; border-left:1px solid var(--line)}
.panel-head{padding:14px 14px 8px; display:flex; align-items:center; justify-content:space-between; gap:8px}
.panel-head h2{font-size:11px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--faint)}
.iconbtn{padding:4px; border-radius:5px; color:var(--muted); display:grid; place-items:center}
.iconbtn:hover{background:var(--bg); color:var(--ink)}
.iconbtn svg{width:14px; height:14px; stroke-width:1.9}
.panel-scroll{flex:1; overflow-y:auto; padding:0 8px 14px; scrollbar-width:thin}
.panel-empty{margin:8px 6px; padding:16px 12px; border:1px dashed var(--line-strong); border-radius:var(--radius); color:var(--faint); font-size:12.5px; line-height:1.55; text-align:center}
#newDimBtn{margin:2px 12px 12px; display:flex; align-items:center; justify-content:center; gap:8px; padding:13px; background:var(--accent); color:#fff; border-radius:var(--radius); font-weight:600; font-size:14.5px}
#newDimBtn:hover{background:#2246B4}
#newDimBtn svg{width:15px; height:15px; stroke-width:2.2}

/* ---------- Excel export footer ---------- */
#dimFooter{flex:0 0 auto; padding:10px 12px; border-top:1px solid var(--line)}
#exportXlsBtn{width:100%; display:flex; align-items:center; justify-content:center; gap:8px; padding:11px; border-radius:var(--radius); font-weight:600; font-size:13.5px; color:#0E6B3D; background:#E7F6EE; border:1px solid #BCE6D0}
#exportXlsBtn:hover{background:#D9F1E4}
#exportXlsBtn:disabled{opacity:.5; cursor:default; pointer-events:none}
#exportXlsBtn svg{width:15px; height:15px; stroke-width:1.9; flex:0 0 15px}
#exportXlsBtn .spin{animation:xlspin .8s linear infinite}
@keyframes xlspin{to{transform:rotate(360deg)}}

/* ---------- Dimension tree ---------- */
.folder{margin:2px 0}
.folder-row{display:flex; align-items:center; gap:7px; padding:6px 7px; border-radius:6px; cursor:pointer; user-select:none; color:var(--muted); font-weight:600; font-size:12.5px}
.folder-row:hover{background:var(--bg)}
.caret{width:14px; height:14px; flex:0 0 14px; color:var(--faint); transition:transform .12s; display:grid; place-items:center}
.caret svg{width:11px;height:11px;stroke-width:2.2}
.open > .folder-row .caret{transform:rotate(90deg)}
.folder-kids{margin-left:12px; border-left:1px solid var(--line); padding-left:6px; display:none}
.folder.open > .folder-kids{display:block}
.group{margin:2px 0}
/* default group row is a single line: dot + name + (pill/actions + total on the right) */
.group-row{display:flex; align-items:center; gap:7px; padding:6px 8px; border-radius:7px; cursor:pointer; user-select:none}
.group-row:hover{background:var(--bg)}
.group-row .gtype{width:14px; height:14px; flex:0 0 14px; display:block}
.group-row .gtype svg{width:14px; height:14px; display:block}
.group-row .gname{flex:1; min-width:0; font-weight:600; font-size:12.5px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word}
.group-row .grtop{display:flex; align-items:center; gap:4px; flex:0 0 auto}
.tpill{flex:0 0 auto; font-size:9.5px; font-weight:700; letter-spacing:.02em; color:var(--muted); background:var(--bg); border:1px solid var(--line); border-radius:4px; padding:1px 5px; line-height:1.4}
.group.active > .group-row .tpill{color:var(--accent); border-color:var(--accent-line); background:#fff}
.group-row .gbreak{font-size:10.5px; color:var(--faint); font-weight:500; text-align:right; overflow-wrap:anywhere}
.group-row .gtotal{font-size:12.5px; color:var(--ink); white-space:nowrap; font-weight:700; margin-left:4px}
.group-row .gtotal small{font-weight:500; color:var(--faint); margin-left:2px}
/* two-line variant (volume / linear+height): name row on top, working + total beneath */
.group-row.two-line{display:grid; grid-template-columns:auto 1fr auto; grid-template-rows:auto auto; column-gap:7px; row-gap:2px; align-items:center}
.group-row.two-line .gtype{grid-row:1; grid-column:1}
.group-row.two-line .gname{grid-row:1; grid-column:2}
.group-row.two-line .grtop{grid-row:1; grid-column:3; justify-self:end}
.group-row.two-line .gline2{grid-row:2; grid-column:2 / 4; display:flex; align-items:baseline; justify-content:flex-end; flex-wrap:wrap; gap:4px; min-width:0}
.group-row.two-line .gline2 .gtotal{margin-left:0}
.group.active > .group-row, .group.sel > .group-row{background:var(--accent-soft)}
.group.active > .group-row .gname, .group.sel > .group-row .gname{color:var(--accent)}
.group.active > .group-row .gtotal, .group.sel > .group-row .gtotal{color:var(--accent)}
.group.hiddenG > .group-row .gtype,
.group.hiddenG > .group-row .gname,
.group.hiddenG > .group-row .gtotal,
.group.hiddenG > .group-row .gbreak,
.group.hiddenG > .group-row .tpill{opacity:.42}
.folder-row.folder-active{background:var(--accent-soft)}
.folder-row.folder-active .gname{color:var(--accent)}
.row-hover-acts{display:none; gap:1px}
.folder-row:hover .row-hover-acts,.group-row:hover .row-hover-acts{display:flex}
.group.hiddenG > .group-row .grtop .row-hover-acts{display:flex} /* keep eye visible when hidden */
.row-hover-acts .iconbtn{padding:2px}
.row-hover-acts .iconbtn svg{width:12px;height:12px}
.meas-empty{padding:4px 6px; font-size:11.5px; color:var(--faint); font-style:italic}

/* ---------- Drawings panel ---------- */
#browseProjBtn{margin:4px 10px 10px; display:flex; align-items:center; justify-content:center; gap:7px; padding:9px; border:1px solid var(--line-strong); border-radius:var(--radius); color:var(--muted); font-weight:600; font-size:13px; background:#fff}
#browseProjBtn:hover{border-color:var(--accent); color:var(--accent); background:var(--accent-soft)}
#browseProjBtn svg{width:14px; height:14px; stroke-width:2}
#credit{flex:0 0 auto; padding:8px 12px 10px; font-size:9px; line-height:1.55; color:#C7CDD6; text-align:left; user-select:none; letter-spacing:.02em; overflow-wrap:break-word}

/* ---------- Startup project picker ---------- */
.pick{display:flex; align-items:center; gap:10px; padding:11px 12px; border:1px solid var(--line); border-radius:9px; cursor:pointer; background:#fff}
.pick:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.pick .pk-main{flex:1; min-width:0}
.pick .pk-name{font-weight:600; font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.pick .pk-meta{font-size:11.5px; color:var(--faint); margin-top:2px}
.pick .pk-name-input{width:100%; padding:5px 7px; border:1px solid var(--accent); border-radius:6px; font-size:13.5px; box-shadow:0 0 0 3px rgba(41,83,209,.12)}
.pick .pk-acts{display:flex; gap:2px; flex:0 0 auto}
.pick .pk-acts .iconbtn svg{width:14px; height:14px; stroke-width:1.9}
.pick.confirming{border-color:var(--danger-line); background:var(--danger-soft)}
.pick .pk-confirm{display:flex; gap:6px; align-items:center; font-size:12px; color:var(--danger); font-weight:600}
.pick .pk-confirm button{padding:4px 10px; border-radius:6px; font-size:12px; font-weight:600}
.pick .pk-confirm .yes{background:var(--danger); color:#fff}
.pick .pk-confirm .no{color:var(--muted); border:1px solid var(--line-strong)}
#pickerEmpty{padding:18px 12px; border:1px dashed var(--line-strong); border-radius:9px; color:var(--faint); font-size:12.5px; text-align:center}

/* ---------- Canvas ---------- */
#canvasWrap{flex:1; position:relative; background:var(--canvas-bg); min-width:0; overflow:hidden}
#cv{position:absolute; inset:0; width:100%; height:100%; display:block; touch-action:none}
#cv.tool-select{cursor:grab} #cv.panning{cursor:grabbing!important} #cv.vhover{cursor:move!important} #cv.bhover{cursor:all-scroll!important}
#cv.tool-linear,#cv.tool-area,#cv.tool-volume,#cv.tool-calibrate,#cv.tool-ruler{cursor:crosshair}
#cv.tool-count{cursor:copy}
#hintbar{position:absolute; left:50%; bottom:14px; transform:translateX(-50%); background:rgba(23,26,31,.88); color:#fff; font-size:12px; padding:6px 14px; border-radius:99px; pointer-events:none; white-space:nowrap; opacity:0; transition:opacity .15s}
#hintbar.show{opacity:1}
#hintbar kbd{font:600 10.5px var(--font-ui); background:rgba(255,255,255,.16); border-radius:3px; padding:1px 5px; margin:0 1px}
.canvas-empty{position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; color:var(--faint); text-align:center; padding:20px;
  background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px); background-size:28px 28px}
.canvas-empty h3{font-family:var(--font-display); font-size:17px; color:var(--muted); font-weight:500}
.canvas-empty p{font-size:13px; max-width:340px; line-height:1.6}
.canvas-empty .tbtn.primary{padding:9px 18px; font-size:13.5px}
#dropHint{position:absolute; inset:10px; border:2px dashed var(--accent); border-radius:12px; background:rgba(41,83,209,.06); display:none; align-items:center; justify-content:center; color:var(--accent); font-weight:600; z-index:15; pointer-events:none}
#dropHint.show{display:flex}

/* ---------- Modals & popovers ---------- */
.overlay{position:fixed; inset:0; background:rgba(17,20,26,.42); display:none; align-items:center; justify-content:center; z-index:50; padding:16px}
.overlay.show{display:flex}
.modal{background:#fff; border-radius:12px; box-shadow:0 20px 50px rgba(16,24,40,.22); width:100%; max-width:560px; max-height:92vh; display:flex; flex-direction:column; overflow:hidden}
.modal-head{padding:15px 20px 10px; display:flex; align-items:center; justify-content:space-between}
.modal-head h3{font-family:var(--font-display); font-size:16px; font-weight:700; letter-spacing:-.01em}
.modal-body{padding:4px 20px 16px; overflow-y:auto}
.modal-foot{padding:12px 20px 16px; display:flex; justify-content:flex-end; gap:8px; border-top:1px solid var(--line)}
.btn{padding:8px 16px; border-radius:7px; font-weight:600; font-size:13px}
.btn.ghost{color:var(--muted)} .btn.ghost:hover{background:var(--bg); color:var(--ink)}
.btn.solid{background:var(--accent); color:#fff} .btn.solid:hover{background:#2246B4}
.btn.solid:disabled{opacity:.45; cursor:default}
.field{margin-bottom:12px}
.field label{display:block; font-size:12px; font-weight:600; color:var(--muted); margin-bottom:5px}
.field input[type=text],.field input[type=number],.field select{width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; font-size:13.5px}
.field input:focus,.field select:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(41,83,209,.12)}
/* folder-name autocomplete — floats above the New folder input */
.folder-suggest{position:absolute; left:0; right:0; bottom:calc(100% + 4px); background:#fff; border:1px solid var(--line-strong); border-radius:8px; box-shadow:0 8px 24px rgba(16,24,40,.16); padding:4px; z-index:5; display:none; max-height:180px; overflow-y:auto}
.folder-suggest.show{display:block}
.folder-suggest .fs-hint{font-size:10.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:var(--faint); padding:4px 8px 2px}
.folder-suggest button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:7px 9px; border-radius:6px; font-size:13px; color:var(--ink)}
.folder-suggest button:hover,.folder-suggest button.active{background:var(--accent-soft); color:var(--accent)}
.folder-suggest button svg{width:14px; height:14px; stroke-width:1.9; flex:0 0 14px; color:var(--accent)}
.folder-suggest button .fs-sub{color:var(--faint); font-size:11px; margin-left:auto}
.seg{display:grid; grid-template-columns:repeat(4,1fr); gap:4px; background:var(--bg); padding:3px; border-radius:8px}
.seg button{padding:8px 4px; border-radius:6px; font-size:12.5px; font-weight:500; color:var(--muted)}
.seg button.on{background:#fff; color:var(--accent); font-weight:600; box-shadow:0 1px 2px rgba(16,24,40,.08)}
.ratio-row{display:flex; gap:7px; align-items:center}
.ratio-row input{width:80px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; font-size:13.5px; text-align:center}
.ratio-row input:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(41,83,209,.12)}
.ratio-row .colon{font-weight:700; color:var(--muted)}
.swatches{display:flex; gap:7px; flex-wrap:wrap}
.swatch{width:24px; height:24px; border-radius:7px; border:2px solid transparent; cursor:pointer}
.swatch.on{border-color:var(--ink); box-shadow:inset 0 0 0 2px #fff}
#upPreviewBox{border:1px solid var(--line); border-radius:8px; background:var(--canvas-bg); display:grid; place-items:center; min-height:200px; max-height:300px; overflow:hidden; margin-bottom:14px; position:relative}
#upPreview{max-width:100%; max-height:298px; display:block}
#upSpin{position:absolute; color:var(--faint); font-size:12.5px}
.detect-pill{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; padding:4px 10px; border-radius:99px; margin-bottom:10px}
.detect-pill.found{background:#E8F6EF; color:#0E7B4F}
.detect-pill.none{background:var(--bg); color:var(--faint); font-weight:500}
.note{font-size:12px; color:var(--faint); line-height:1.55; margin-top:6px}
.popover{position:fixed; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(16,24,40,.16); padding:14px; z-index:60; width:260px; display:none}
.popover.show{display:block}
.popover h4{font-size:12px; font-weight:700; margin-bottom:10px; letter-spacing:.03em; text-transform:uppercase; color:var(--faint)}
.pop-opt{display:flex; gap:9px; width:100%; text-align:left; padding:9px; border-radius:7px; align-items:flex-start}
.pop-opt:hover{background:var(--bg)}
.pop-opt svg{width:15px; height:15px; stroke-width:1.8; flex:0 0 15px; color:var(--accent); margin-top:1px}
.pop-opt b{display:block; font-size:12.5px; font-weight:600}
.pop-opt small{font-size:11.5px; color:var(--faint); line-height:1.4; display:block}
.pop-opt:disabled{opacity:.4; cursor:default}
#calibBox{position:fixed; background:#fff; border:1px solid var(--line); border-radius:10px; box-shadow:0 10px 30px rgba(16,24,40,.2); padding:12px; z-index:60; width:210px; display:none}
#calibBox.show{display:block}
#calibBox label{font-size:11.5px; font-weight:600; color:var(--muted); display:block; margin-bottom:5px}
#calibBox .rowset{display:flex; gap:6px}
#calibBox input{flex:1; width:100%; padding:7px 9px; border:1px solid var(--line-strong); border-radius:6px; font-size:13px}
#calibBox .btn{padding:7px 12px}
#ctxMenu,#treeCtx{position:fixed; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 30px rgba(16,24,40,.18); padding:5px; z-index:70; width:190px; display:none}
#ctxMenu.show,#treeCtx.show{display:block}
#ctxMenu button,#treeCtx button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; border-radius:6px; font-size:12.5px; font-weight:500}
#ctxMenu button:hover,#treeCtx button:hover{background:var(--bg)}
#ctxMenu button:disabled{opacity:.4; cursor:default}
#ctxMenu button:disabled:hover{background:none}
#ctxMenu button.danger,#treeCtx button.danger{color:var(--danger)}
#ctxMenu svg,#treeCtx svg{width:13px; height:13px; stroke-width:1.9; flex:0 0 13px}
.seg button:disabled{opacity:.38; cursor:default}

/* ---------- Dimension search ---------- */
#dimSearchWrap{margin:0 12px 8px; position:relative; display:flex; align-items:center}
#dimSearchWrap > svg{position:absolute; left:9px; width:13px; height:13px; stroke-width:2; color:var(--faint); pointer-events:none}
#dimSearch{width:100%; padding:7px 26px 7px 28px; border:1px solid var(--line-strong); border-radius:7px; font-size:12.5px; background:#fff}
#dimSearch:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(41,83,209,.12)}
#dimSearchClear{position:absolute; right:5px; color:var(--faint); font-size:14px; padding:2px 6px; border-radius:4px; display:none; line-height:1}
#dimSearchClear.show{display:block}
#dimSearchClear:hover{color:var(--ink); background:var(--bg)}

/* ---------- Keyboard shortcuts ---------- */
#shortcutsBtn{font-weight:700; font-size:12px; min-width:24px; height:24px; border:1px solid var(--line); border-radius:6px; color:var(--muted); display:grid; place-items:center}
#shortcutsBtn:hover{background:var(--bg); color:var(--ink)}
.sc-list{display:flex; flex-direction:column; margin:2px 0 6px}
.sc-row{display:flex; justify-content:space-between; align-items:center; gap:14px; padding:7px 2px; font-size:12.5px; border-bottom:1px solid var(--line)}
.sc-row:last-child{border-bottom:none}
.sc-row span:last-child{color:var(--muted); white-space:nowrap}
.sc-row kbd{font:600 10.5px var(--font-ui); color:var(--muted); border:1px solid var(--line-strong); border-bottom-width:2px; border-radius:4px; padding:1px 5px; background:#fff}

/* ---------- Custom colour swatch ---------- */
.swatch.custom{position:relative; overflow:hidden; display:grid; place-items:center}
.swatch.custom input{position:absolute; inset:-6px; opacity:0; cursor:pointer; width:44px; height:44px}

/* ---------- Toast ---------- */
#toasts{position:fixed; top:62px; left:50%; transform:translateX(-50%); z-index:80; display:flex; flex-direction:column; gap:6px; align-items:center}
.toast{background:rgba(23,26,31,.92); color:#fff; font-size:12.5px; padding:8px 16px; border-radius:8px; box-shadow:0 6px 20px rgba(0,0,0,.2); animation:tin .18s ease}
.toast.warn{background:#8a5a10}
@keyframes tin{from{opacity:0; transform:translateY(-6px)} to{opacity:1}}

/* ================================================================
   PRIVACY / DATA-HANDLING UI
   Session-mode chip in the toolbar, the first-run disclosure modal
   and the "Clear confidential data" panel.
   ================================================================ */
.privchip{display:flex; align-items:center; gap:6px; padding:6px 10px; border-radius:6px; border:1px solid var(--line); background:#fff; font-size:12.5px; font-weight:600; white-space:nowrap; color:var(--muted)}
.privchip svg{width:14px; height:14px; flex:0 0 14px}
.privchip:hover{background:var(--bg); color:var(--ink)}
/* saving on this device = blue (the normal, expected state) */
.privchip.persistent{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)}
.privchip.persistent:hover{background:#E2E9FA}
/* private session = the same muted red as Deduct, not a bright alarm red */
.privchip.private{color:var(--danger); border-color:var(--danger-line); background:var(--danger-soft)}
.privchip.private:hover{background:#F7DED9}

.intro-lead{font-size:13px; color:var(--muted); line-height:1.6; margin-bottom:12px}
.intro-lead b{color:var(--ink); font-weight:600}

.mode-list{display:flex; flex-direction:column; gap:8px}
.mode-card{display:flex; gap:10px; width:100%; text-align:left; align-items:flex-start;
  padding:11px 12px; border:1px solid var(--line-strong); border-radius:9px; background:#fff}
.mode-card:hover{border-color:var(--accent-line); background:var(--accent-soft)}
.mode-card.on{border-color:var(--accent); background:var(--accent-soft); box-shadow:0 0 0 3px rgba(41,83,209,.12)}
.mode-card .mc-ico{flex:0 0 16px; margin-top:1px; color:var(--accent)}
.mode-card .mc-ico svg{width:16px; height:16px}
.mode-card .mc-text{min-width:0}
.mode-card b{display:block; font-size:12.5px; font-weight:600; margin-bottom:3px}
.mode-card small{font-size:11.5px; color:var(--muted); line-height:1.5; display:block}
.mode-card small b{display:inline; font-size:inherit}
.mc-tag{display:inline-block; font-size:10px; font-weight:600; text-transform:uppercase;
  letter-spacing:.04em; color:var(--accent); background:var(--accent-soft);
  border:1px solid var(--accent-line); border-radius:4px; padding:1px 5px; margin-left:5px; vertical-align:1px}

.mode-note{font-size:11.5px; line-height:1.55; color:var(--warn); background:var(--warn-soft);
  border:1px solid #F3D9B0; border-radius:7px; padding:8px 10px; margin-bottom:12px}
.mode-note.private{color:#0E7C5A; background:#EAF7F1; border-color:#BFE3D3}


/* ================================================================
   RULES REPLACING FORMER INLINE STYLE ATTRIBUTES
   Every style="..." attribute was removed from index.html and from the
   templates in app.js so that the Content-Security-Policy can keep
   style-src 'self' with no 'unsafe-inline' exception. Elements that
   start hidden are marked data-init-hidden and are set to display:none
   through the CSSOM at start-up (see app.js), which CSP does not
   restrict and which preserves the original toggle semantics.
   ================================================================ */
#textOverlay .modal{max-width:360px}
#confirmOverlay .modal{max-width:380px}
#groupOverlay .modal{max-width:600px}
#shortcutsOverlay .modal{max-width:440px}
#pickerOverlay .modal{max-width:460px}
#introOverlay .modal,#privacyOverlay .modal{max-width:540px}

#confirmText{font-size:13px; color:var(--muted); line-height:1.55}
#confirmOk{background:var(--danger)}
#confirmOk:hover{background:#A33024}

.pick-lead{font-size:12.5px; color:var(--muted); line-height:1.5; margin-bottom:12px}
#pickerList{display:flex; flex-direction:column; gap:6px; max-height:46vh; overflow-y:auto; margin-bottom:14px}
#pickerNewRow{display:flex; gap:8px; align-items:center}
#pickerNewName{flex:1; padding:9px 11px; border:1px solid var(--line-strong); border-radius:8px; font-size:13.5px}
#pickerNewName:focus{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(41,83,209,.12)}

#upRatioRow{margin-top:8px}
#gNewFolderWrap{margin-top:8px; position:relative}
#popRatioField{margin:6px 0 4px; padding:0 9px}
#popRatioPreset{width:100%; padding:7px 9px; border:1px solid var(--line-strong); border-radius:6px; font-size:13px; margin-bottom:8px}
#popR1,#popR2{width:64px}
#popRatioApply{padding:7px 12px}

/* dimension-tree folder row: icon sizing and two-line name clamp */
.folder-row .fico{flex:0 0 13px}
.fname-clamp{flex:1; min-width:0; line-height:1.3; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word}


/* ================================================================
   FOLDER PICKER (custom listbox replacing the native select)
   A native <select> cannot indent options, bold them or show a
   colour swatch on macOS, so the visible control is built here.
   The real <select id="gFolder"> is hidden but still holds the value.
   ================================================================ */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; border:0}

.fsel{position:relative}
.fsel-btn{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:8px 10px; border:1px solid var(--line-strong); border-radius:7px; background:#fff; font-size:13.5px}
.fsel-btn:hover{border-color:var(--faint)}
.fsel-btn.open,.fsel-btn:focus-visible{border-color:var(--accent); outline:none; box-shadow:0 0 0 3px rgba(41,83,209,.12)}
.fsel-value{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.fsel-caret{width:14px; height:14px; flex:0 0 14px; color:var(--faint)}
.fsel-btn.open .fsel-caret{transform:rotate(180deg)}

/* the colour bar that ties a row to its folder in the dimensions tree */
.fsel-bar{flex:0 0 3px; width:3px; align-self:stretch; min-height:15px; border-radius:2px; background:var(--line-strong)}
.fsel-bar.empty{background:transparent; box-shadow:inset 0 0 0 1px var(--line)}

.fsel-list{position:absolute; z-index:70; left:0; right:0; top:calc(100% + 4px);
  background:#fff; border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 12px 30px rgba(16,24,40,.18); padding:4px; max-height:250px; overflow-y:auto}
.fsel-opt{display:flex; align-items:center; gap:8px; width:100%; text-align:left;
  padding:7px 8px; border-radius:6px; font-size:13px; color:var(--ink)}
.fsel-opt:hover,.fsel-opt:focus-visible{background:var(--bg); outline:none}
.fsel-opt.on{background:var(--accent-soft); color:var(--accent)}
.fsel-txt{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
/* top-level folders read as headings; subfolders sit under them */
.fsel-opt.top .fsel-txt{font-weight:700}
.fsel-opt.none .fsel-txt,.fsel-opt.new .fsel-txt{color:var(--muted)}
.fsel-opt.new{border-top:1px solid var(--line); border-radius:0 0 6px 6px; margin-top:4px; padding-top:9px}
.fsel-opt[data-depth="1"]{padding-left:22px}
.fsel-opt[data-depth="2"]{padding-left:36px}
.fsel-opt[data-depth="3"]{padding-left:50px}
.fsel-opt[data-depth="4"]{padding-left:64px}
.fsel-opt[data-depth="5"]{padding-left:78px}
.fsel-opt[data-depth="6"]{padding-left:92px}

/* ================================================================
   PICKED vs HIGHLIGHTED DIMENSIONS
   'sel'    — the group or folder is highlighted from the tree
   'picked' — the user singled dimensions out with Ctrl+click, or by
              clicking one on the drawing. Picked wins: it is what
              copy, delete, duplicate and dragging act on.
   ================================================================ */
.group.picked > .group-row{box-shadow:inset 2px 0 0 var(--ink)}
.group.picked > .group-row .gname{font-weight:700}
.gpick{flex:0 0 auto; margin-left:6px; font-size:9.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.04em; color:#5A6675; background:#EDF0F4; border:1px solid #DDE3EA;
  border-radius:4px; padding:0 5px; white-space:nowrap}

/* the "use for confidential drawings" tag on the private-session card */
.mc-tag.alt{color:var(--warn); background:var(--warn-soft); border-color:#F3D9B0}

/* ================================================================
   NEW / EDIT DIMENSION GROUP DIALOGUE
   Wider, and laid out so the whole form — including the folder
   picker — is reachable without scrolling the dialogue body.
   ================================================================ */
#groupOverlay .modal-body{padding-top:2px}
@media (max-width:640px){ .seg{grid-template-columns:1fr 1fr} }

/* The folder list expands inline rather than floating. An absolutely
   positioned list is clipped by the scrolling dialogue body, which is what
   forced the user to scroll before they could reach "Create new folder". */
.fsel-list{position:static; margin-top:5px; box-shadow:none; max-height:190px}

/* ================================================================
   NESTED DIALOGUE STACKING
   All overlays share z-index 50 and stack by document order, so a
   confirmation opened from another modal rendered behind it and
   appeared not to work. The confirm and text prompts are the only
   dialogues opened from inside another one, so they are raised.
   ================================================================ */
#confirmOverlay{z-index:62}
#textOverlay{z-index:61}

/* ================================================================
   INPUT MODE (Point / Line) + SNAP toggles, and Copy-to-group submenu
   ================================================================ */


/* Copy-to-group parent item shows a caret; submenu mirrors the context menu */
#ctxMenu #ctxCopyGroup{position:relative}
#ctxMenu #ctxCopyGroup .ctx-caret{width:12px; height:12px; margin-left:auto; flex:0 0 12px; opacity:.6}
#ctxMenu #ctxCopyGroup.open{background:var(--bg)}
#ctxCopySub{position:fixed; background:#fff; border:1px solid var(--line); border-radius:9px; box-shadow:0 10px 30px rgba(16,24,40,.18); padding:5px; z-index:71; min-width:180px; max-width:280px; max-height:60vh; overflow-y:auto; display:none}
#ctxCopySub.show{display:block}
#ctxCopySub button{display:flex; align-items:center; gap:8px; width:100%; text-align:left; padding:8px 10px; border-radius:6px; font-size:12.5px; font-weight:500}
#ctxCopySub button:hover{background:var(--bg)}
#ctxCopySub .ctx-dot{width:10px; height:10px; border-radius:3px; flex:0 0 10px}
#ctxCopySub .ctx-glabel{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ---------- Responsive ---------- */
.panel-toggle{display:none}
@media (max-width:900px){
  #dimPanel,#projPanel{position:absolute; top:52px; bottom:0; z-index:30; box-shadow:0 0 30px rgba(0,0,0,.15); transform:translateX(-105%); transition:transform .18s}
  #dimPanel{left:0; width:min(88vw,340px)!important; flex-basis:auto!important} #projPanel{right:0; transform:translateX(105%)}
  #dimPanel.open,#projPanel.open{transform:none}
  #dimResize{display:none}
  .panel-toggle{display:grid}
  #drawTabs{max-width:22vw}
  .tool span{display:none}
  #privacyChipLabel{display:none}
}


/* ---- project picker thumbnails ---- */
.pick .pk-thumb{flex:0 0 54px; width:54px; height:54px; border-radius:8px;
  border:1px solid var(--line); background:#fff center/cover no-repeat;
  display:grid; place-items:center; color:#9AA7B4; overflow:hidden}
.pick .pk-thumb svg{width:20px; height:20px}
.pick .pk-thumb.has-img{border-color:var(--accent-line)}
.pick .pk-thumb.locked{background:var(--danger-soft); border-color:var(--danger-line); color:var(--danger)}
.pick .pk-thumb.empty{background:var(--bg)}
@media (max-width:640px){ .pick .pk-thumb{flex-basis:44px; width:44px; height:44px} }


/* ---- toolbar: less cramped now the upload button and "?" have gone ---- */
header#toolbar{gap:10px}
#tools{gap:3px}
#tools .tool{padding-left:9px; padding-right:9px}
.tb-sep{margin:0 4px}
#zoomCtl{gap:2px}
/* hide the scale chip entirely until a drawing exists — the canvas already says so */
#scaleChip[disabled]{display:none}

/* ---- default-highlighted mode card in the save dialog ---- */
.mode-card.selected, .mode-card:focus-visible{border-color:var(--accent);
  background:var(--accent-soft); box-shadow:0 0 0 3px rgba(41,83,209,.12)}
.mode-card:hover{border-color:var(--accent-line)}


/* ---- view controls (zoom / fit / rotate) as their own group, matching
        #tools and #modeTgl rather than floating loose in the bar ---- */
#zoomCtl{background:var(--bg); padding:3px; border-radius:8px; gap:1px}
#zoomCtl button{border-radius:6px}
#zoomCtl button:hover{background:#fff}
#zoomPct{min-width:44px}
#zoomPct:empty{min-width:0; display:none}


/* view controls: %, Fit and Rotate on one baseline now the +/- have gone */
#zoomCtl{align-items:center}
#zoomCtl > *{align-self:center}
#zoomPct{min-width:42px; line-height:1}
#zoomCtl button{display:inline-flex; align-items:center; justify-content:center; height:26px}
#shortcutsBtn{font-weight:700; font-size:13px}


/* ---- view controls: single baseline for %, Fit and Rotate ---- */
#zoomCtl{align-items:center}
#zoomCtl button, #zoomPct{display:inline-flex; align-items:center; justify-content:center; height:28px; line-height:1}
#zoomCtl button svg{display:block}
#zoomPct{padding:0 4px; font-variant-numeric:tabular-nums}
#toolbar #shortcutsBtn{font-weight:700; font-size:13px}