@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&family=DM+Sans:wght@300;400;500&display=swap');
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
:root{
  --bg:#f0ede8;--surface:#faf9f7;--surface2:#f2f0ec;--surface3:#eceae5;
  --border:#ddd9d2;--border2:#ccc8c0;--text:#1a1916;--text2:#5a5650;--text3:#9a968e;
  --accent:#8b6914;--accent-bg:rgba(139,105,20,0.08);--accent-bd:rgba(139,105,20,0.35);
  --red:#c0392b;--red-bg:rgba(192,57,43,0.07);--red-bd:rgba(192,57,43,0.25);
  --blue:#2471a3;--green:#27ae60;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--text);font-family:'DM Sans',sans-serif;}
#app{display:flex;height:100vh;}

/* ── SIDEBAR ── */
#sidebar{width:228px;min-width:228px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;z-index:10;overflow-y:auto;}
#logo{padding:16px 14px 12px;border-bottom:1px solid var(--border);}
#logo h1{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);}
#logo p{font-size:10px;color:var(--text3);margin-top:2px;font-family:'DM Mono',monospace;}
.sb-sec{padding:10px 12px;border-bottom:1px solid var(--border);}
.sb-lbl{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:8px;}

/* floor tabs */
#floor-tabs{display:flex;gap:3px;margin-bottom:5px;}
.ftab{flex:1;padding:6px 3px;font-size:10px;font-family:'DM Mono',monospace;background:var(--surface2);border:1px solid var(--border);border-radius:5px;cursor:pointer;color:var(--text2);text-align:center;transition:all .12s;user-select:none;line-height:1.3;}
.ftab:hover{border-color:var(--border2);color:var(--text);}
.ftab.active{background:var(--accent-bg);border-color:var(--accent-bd);color:var(--accent);font-weight:500;}
.ftab span{font-size:8px;opacity:.7;display:block;}

/* tool grid */
.tgrid{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.tbtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:9px 5px;background:var(--surface2);border:1px solid var(--border);border-radius:6px;cursor:pointer;transition:all .12s;color:var(--text2);font-size:10px;font-family:'DM Mono',monospace;user-select:none;}
.tbtn:hover{border-color:var(--border2);color:var(--text);background:var(--surface3);}
.tbtn.active{border-color:var(--accent-bd);color:var(--accent);background:var(--accent-bg);}
.tbtn svg{width:16px;height:16px;}

/* sub-options */
.sub-opts{margin-top:8px;}
.opt-lbl{font-size:9px;color:var(--text3);font-family:'DM Mono',monospace;margin-bottom:5px;}
.opt-row{display:flex;flex-wrap:wrap;gap:3px;margin-bottom:6px;}
.opt-btn{padding:4px 8px;font-size:10px;font-family:'DM Mono',monospace;background:var(--surface2);border:1px solid var(--border);border-radius:4px;cursor:pointer;color:var(--text2);transition:all .12s;user-select:none;white-space:nowrap;}
.opt-btn:hover{color:var(--text);border-color:var(--border2);}
.opt-btn.active{color:var(--accent);border-color:var(--accent-bd);background:var(--accent-bg);}

/* room palette */
.room-palette{display:grid;grid-template-columns:1fr 1fr;gap:3px;}
.room-chip{padding:5px 6px;font-size:10px;font-family:'DM Mono',monospace;border:1px solid var(--border);border-radius:4px;cursor:pointer;transition:all .12s;user-select:none;display:flex;align-items:center;gap:5px;}
.room-chip:hover{border-color:var(--border2);}
.room-chip.active{border-color:var(--accent-bd);outline:1px solid var(--accent-bd);}
.room-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0;}

/* full btns */
.bfull{width:100%;padding:7px 10px;margin-bottom:3px;background:var(--surface2);border:1px solid var(--border);border-radius:5px;cursor:pointer;transition:all .12s;color:var(--text2);font-size:11px;font-family:'DM Mono',monospace;text-align:left;display:flex;align-items:center;gap:7px;user-select:none;}
.bfull:hover{border-color:var(--border2);color:var(--text);background:var(--surface3);}
.bfull svg{width:12px;height:12px;flex-shrink:0;}
.bfull.danger{color:var(--red);border-color:var(--red-bd);}
.bfull.danger:hover{background:var(--red-bg);border-color:var(--red);}

#info-panel{margin-top:auto;padding:11px 12px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);line-height:1.9;border-top:1px solid var(--border);}
.iv{color:var(--text2);}
.hints{font-size:9px;color:var(--text3);margin-top:8px;line-height:1.7;border-top:1px solid var(--border);padding-top:8px;}

/* ── CANVAS ── */
#canvas-wrap{flex:1;position:relative;overflow:hidden;}
#canvas{position:absolute;top:0;left:0;cursor:crosshair;}
#canvas.sel{cursor:default;}
#canvas.pan{cursor:grab;}
#canvas.pan.panning{cursor:grabbing;}
#canvas.opening{cursor:crosshair;}
#canvas.room{cursor:cell;}

/* overlays */
#floor-strip{position:absolute;top:12px;left:12px;background:var(--surface);border:1px solid var(--border);border-radius:7px;padding:5px 10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);z-index:20;display:flex;align-items:center;gap:6px;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.fsdot{width:8px;height:8px;border-radius:50%;}
#top-bar{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:3px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:4px 7px;z-index:20;box-shadow:0 1px 4px rgba(0,0,0,.07);}
.tbar-btn{padding:4px 8px;font-size:11px;font-family:'DM Mono',monospace;background:none;border:none;color:var(--text2);cursor:pointer;border-radius:4px;transition:all .12s;display:flex;align-items:center;gap:4px;}
.tbar-btn:hover{color:var(--text);background:var(--surface2);}
.tsep{width:1px;height:14px;background:var(--border);margin:0 2px;}
#scale-badge{position:absolute;bottom:34px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:5px;padding:5px 10px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);display:flex;align-items:center;gap:8px;z-index:10;}
#scale-bar{height:3px;background:var(--accent);border-radius:1px;transition:width .2s;}

/* props panel */
#props{position:absolute;top:12px;right:12px;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px 14px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text2);z-index:20;display:none;min-width:180px;line-height:1.9;box-shadow:0 1px 4px rgba(0,0,0,.07);}
#props .ptitle{color:var(--accent);font-size:11px;font-weight:500;margin-bottom:8px;}
#props .prow{display:flex;align-items:center;justify-content:space-between;margin-bottom:4px;}
#props .prow label{color:var(--text3);}
#props input[type=range]{width:90px;accent-color:var(--accent);}
#props input[type=number]{width:60px;padding:2px 5px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:'DM Mono',monospace;font-size:10px;}
#props select{padding:2px 4px;background:var(--surface2);border:1px solid var(--border);border-radius:3px;color:var(--text);font-family:'DM Mono',monospace;font-size:10px;}
.pdel{margin-top:10px;padding:5px 8px;width:100%;background:var(--red-bg);border:1px solid var(--red-bd);border-radius:4px;color:var(--red);font-family:'DM Mono',monospace;font-size:10px;cursor:pointer;transition:all .12s;text-align:left;}
.pdel:hover{background:rgba(192,57,43,.14);border-color:var(--red);}

#tooltip{position:absolute;pointer-events:none;background:var(--surface);border:1px solid var(--border2);border-radius:4px;padding:3px 8px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text);z-index:30;display:none;white-space:nowrap;box-shadow:0 1px 3px rgba(0,0,0,.1);}
#status{position:absolute;bottom:0;left:0;right:0;height:27px;background:var(--surface);border-top:1px solid var(--border);display:flex;align-items:center;padding:0 12px;gap:18px;font-family:'DM Mono',monospace;font-size:10px;color:var(--text3);z-index:10;}
#status .sv{color:var(--text2);}
#status .ss{color:var(--border2);}