:root{
  --bg:#0f1216; --bg2:#151a21; --panel:#181e26; --line:#26303c;
  --fg:#e6edf3; --muted:#8b98a8; --accent:#6ea8fe; --accent2:#2b6cb0;
  --danger:#f2645a; --ok:#5ac48a; --warn:#e5b567;
  --r:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:13px/1.45 system-ui,-apple-system,Segoe UI,Roboto,sans-serif;
  display:flex; flex-direction:column; overflow:hidden;
}
button,input,select{font:inherit;color:inherit}
button{
  background:var(--bg2); border:1px solid var(--line); color:var(--fg);
  padding:5px 10px; border-radius:var(--r); cursor:pointer;
}
button:hover{background:#1e2732; border-color:#38455a}
button.primary{background:var(--accent2); border-color:#3b82c4}
button.primary:hover{background:#3277c0}
button.ghost{background:transparent}
button.active{background:var(--accent2); border-color:#4f93d9; color:#fff}
input[type=text],input[type=number],select{
  background:#10151b; border:1px solid var(--line); border-radius:6px; padding:4px 6px; min-width:0;
}
input[type=color]{background:#10151b;border:1px solid var(--line);border-radius:6px;padding:1px;height:26px;width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- toolbar ---------- */
.toolbar{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:7px 12px; background:var(--panel); border-bottom:1px solid var(--line);
}
.brand{font-weight:650; letter-spacing:.3px; color:var(--accent); margin-right:4px}
.group{display:flex; align-items:center; gap:6px}
.group.right{margin-left:auto}
.chk{display:flex; align-items:center; gap:5px; color:var(--muted); cursor:pointer; user-select:none}
.chk input{accent-color:var(--accent)}
.glabel{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.8px}
.lay{display:flex; align-items:center; gap:6px; padding:4px 9px; font-size:12px}
.lay .sw{width:9px; height:9px; border-radius:2px; flex:0 0 9px}
.lay.off{color:var(--muted); background:transparent; border-style:dashed}
.lay.off .sw{opacity:.3}
.scaleBadge{
  padding:3px 8px; border-radius:20px; background:#2a2118; color:var(--warn);
  border:1px solid #4a3a22; font-size:12px; white-space:nowrap;
}
.scaleBadge.ok{background:#152a20; color:var(--ok); border-color:#22513a}

/* ---------- layout ---------- */
main{flex:1; display:flex; min-height:0}
aside{
  width:250px; flex:0 0 250px; background:var(--panel); border-right:1px solid var(--line);
  display:flex; flex-direction:column; overflow-y:auto;
}
#right{border-right:none; border-left:1px solid var(--line); width:270px; flex-basis:270px}
.panel{padding:10px 11px; border-bottom:1px solid var(--line)}
.panel.grow{flex:1; min-height:0; display:flex; flex-direction:column}
.panel h2{
  margin:0 0 8px; font-size:11px; text-transform:uppercase; letter-spacing:.9px; color:var(--muted);
  display:flex; align-items:center; gap:6px;
}
.count{color:#5f6b7a; font-weight:400; letter-spacing:0}
.muted{color:var(--muted); margin:4px 0}

/* ---------- stage ---------- */
#stage{flex:1; min-width:0; display:flex; flex-direction:column; background:var(--bg)}
.canvasWrap{position:relative; flex:1; min-height:0}
canvas{display:block; width:100%; height:100%; touch-action:none; cursor:default}
.hint{
  position:absolute; left:50%; bottom:14px; transform:translateX(-50%);
  background:#0d1117e8; border:1px solid var(--line); border-radius:20px;
  padding:5px 14px; color:var(--muted); pointer-events:none; white-space:nowrap;
}
.hint:empty{display:none}

.floatbar{
  position:absolute; left:50%; top:12px; transform:translateX(-50%);
  display:flex; align-items:center; gap:8px; padding:6px 10px;
  background:#141a21f2; border:1px solid var(--line); border-radius:10px;
  box-shadow:0 8px 24px #0007; z-index:3;
}
.floatbar[hidden]{display:none!important}
.floatbar label{display:flex; align-items:center; gap:6px; color:var(--muted); font-size:12px}
.floatbar label[hidden]{display:none}
.floatbar input[type=range]{width:110px; accent-color:var(--accent)}
.floatbar output{color:var(--fg); font-variant-numeric:tabular-nums; min-width:38px}
.floatbar .sep{width:1px; align-self:stretch; background:var(--line); margin:0 2px}
.floatbar #wallBarTitle,.floatbar #bar3dTitle{color:var(--muted); font-size:11px; text-transform:uppercase; letter-spacing:.8px}
.floatbar input[type=number]{width:70px}

.banner{
  display:flex; align-items:center; gap:10px; padding:7px 12px;
  background:#3a2c14; border-bottom:1px solid #5c4620; color:#f0c977;
}
.banner[hidden]{display:none!important}
.banner span{flex:1}
.syncBadge{
  padding:3px 8px; border-radius:20px; font-size:11.5px; white-space:nowrap;
  background:#152a20; color:var(--ok); border:1px solid #22513a;
}
.syncBadge.warn{background:#3a2c14; color:#f0c977; border-color:#5c4620}
.syncBadge.err{background:#331d1b; color:var(--danger); border-color:#5c2a26}

/* ---------- tabs ---------- */
.tabs{display:flex; align-items:stretch; gap:2px; background:var(--panel);
  border-bottom:1px solid var(--line); padding:4px 6px 0; overflow-x:auto}
.tab{
  display:flex; align-items:center; gap:7px; padding:5px 8px 6px 11px;
  background:var(--bg2); border:1px solid var(--line); border-bottom:none;
  border-radius:7px 7px 0 0; cursor:pointer; white-space:nowrap; color:var(--muted);
  max-width:220px;
}
.tab:hover{background:#1e2732}
.tab.active{background:var(--bg); color:var(--fg); border-color:var(--line); box-shadow:0 1px 0 0 var(--bg)}
.tab .nm{overflow:hidden; text-overflow:ellipsis}
.tab .x{opacity:.45; padding:0 3px; border-radius:4px; font-size:15px; line-height:1}
.tab .x:hover{opacity:1; background:#39434f; color:var(--danger)}
.tab input{width:120px; padding:1px 4px}
.tabAdd{align-self:center; margin-left:4px; padding:3px 9px}

/* ---------- furniture library ---------- */
.catalog{display:flex; flex-direction:column; gap:4px; overflow-y:auto}
.cItem{
  display:flex; align-items:center; gap:8px; padding:5px 7px; border-radius:6px;
  border:1px solid transparent; cursor:pointer; background:#12171e;
}
.cItem:hover{border-color:#38455a; background:#1a212b}
.cItem .sw{width:12px; height:12px; border-radius:3px; flex:0 0 12px; border:1px solid #0006}
.cItem .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.cItem .dim{color:var(--muted); font-size:11.5px; font-variant-numeric:tabular-nums}
.cItem.editing{border-color:var(--accent); background:#16202c}
.cItem .del{opacity:0; padding:0 4px; border:none; background:none; color:var(--muted)}
.cItem:hover .del{opacity:.6}
.cItem .del:hover{opacity:1; color:var(--danger)}

/* ---------- materials list ---------- */
.bom{max-height:52vh; overflow-y:auto; margin-top:12px; border-top:1px solid var(--line)}
.bom h4{margin:12px 0 4px; font-size:11px; text-transform:uppercase; letter-spacing:.9px; color:var(--muted)}
.bom table{width:100%; border-collapse:collapse}
.bom td{padding:3px 6px 3px 0; vertical-align:top; border-bottom:1px solid #1d2530}
.bom td.q{text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; color:var(--fg)}
.bom td.n{color:var(--muted); font-size:11.5px; text-align:right; white-space:nowrap}
.bom .bnote{color:var(--muted); font-size:11.5px; margin:10px 0 0}

/* ---------- forms ---------- */
.form{display:flex; flex-direction:column; gap:7px}
.form label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); flex:1; min-width:0}
.form .row{display:flex; gap:7px; align-items:flex-end}
.form .row button{flex:1}
.unit{position:absolute; opacity:0}
.form input,.form select{width:100%}

/* ---------- properties ---------- */
.pgrid{display:grid; grid-template-columns:1fr 1fr; gap:7px}
.pgrid .full{grid-column:1/-1}
.pgrid label{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted)}
.pgrid input,.pgrid select{width:100%}
.bandticks{display:flex; align-items:center; gap:9px; flex-wrap:wrap; font-size:11.5px; color:var(--muted)}
.bandticks .chk{flex-direction:row; align-items:center; gap:4px; color:var(--fg); white-space:nowrap}
.pactions{display:flex; gap:6px; margin-top:10px; flex-wrap:wrap}
.pactions button{flex:1; white-space:nowrap}
.pinfo{color:var(--muted); font-size:11.5px; margin-top:8px; border-top:1px solid var(--line); padding-top:7px}
.pinfo b{color:var(--fg); font-weight:600}

/* ---------- object list ---------- */
.objlist{overflow-y:auto; flex:1; display:flex; flex-direction:column; gap:2px; min-height:60px}
.orow{
  display:flex; align-items:center; gap:7px; padding:4px 7px; border-radius:6px;
  cursor:pointer; border:1px solid transparent;
}
.orow:hover{background:#1a212b}
.orow.sel{background:#1c3049; border-color:#2f5c8a}
.orow .sw{width:10px; height:10px; border-radius:2px; flex:0 0 10px}
.orow .nm{flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.orow .dim{color:var(--muted); font-size:11px; font-variant-numeric:tabular-nums}

/* ---------- circuits ---------- */
.crow{display:flex; align-items:center; gap:7px; padding:3px 2px}
.crow .sw{width:10px; height:10px; border-radius:2px; flex:0 0 10px}
.crow .nm{flex:1}
.crow .dim{color:var(--muted); font-size:11.5px}
.crow .len{color:#5f6b7a; font-size:11px; font-variant-numeric:tabular-nums; min-width:52px; text-align:right}
.crow.off{opacity:.45}
.crow.warn .dim{color:var(--danger)}
.orow .dim.bad{color:var(--danger); font-weight:700}
.orow .sw.cable{height:3px; border-radius:2px; width:12px; flex:0 0 12px}

/* ---------- wi-fi ---------- */
.wrow{display:flex; align-items:center; gap:7px; padding:2px 2px}
.wrow .sw{width:12px; height:10px; border-radius:2px; flex:0 0 12px}
.wrow .nm{flex:1; text-transform:capitalize}
.wrow .hint{color:#5f6b7a; font-size:11px}
.wrow .pct{color:var(--muted); font-variant-numeric:tabular-nums; min-width:38px; text-align:right}
.wbar{display:flex; height:8px; border-radius:4px; overflow:hidden; margin:6px 0 9px; background:#10151b}
.wbar span{display:block}
.wnote{color:var(--muted); font-size:11.5px; margin-top:8px; border-top:1px solid var(--line); padding-top:7px}

/* ---------- dialogs ---------- */
dialog{
  background:var(--panel); color:var(--fg); border:1px solid var(--line);
  border-radius:12px; padding:18px 20px; min-width:330px; box-shadow:0 18px 50px #000a;
}
dialog::backdrop{background:#000a}
dialog h3{margin:0 0 6px; font-size:15px}
dialog .row{display:flex; gap:8px; align-items:center; margin:10px 0}
dialog .row input{flex:1}
dialog .row > label.full{flex:1; margin:0}
dialog menu{display:flex; gap:8px; justify-content:flex-end; margin:16px 0 0; padding:0}
dialog label.full{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); margin:10px 0}
dialog label.full select{width:100%}
label.slider{display:flex; flex-direction:column; gap:3px; font-size:11.5px; color:var(--muted); margin:10px 0}
label.slider output{float:right; color:var(--fg); font-variant-numeric:tabular-nums}
label.slider input{accent-color:var(--accent); width:100%}
dialog .chk{margin:8px 0}

::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#2b3542;border-radius:6px}
::-webkit-scrollbar-thumb:hover{background:#3a4757}
::-webkit-scrollbar-track{background:transparent}