:root{
  --bg:#101318; --panel:#171b22; --panel2:#1e232c; --line:#2a3140;
  --txt:#dfe4ec; --dim:#8b97a8; --acc:#4ea1ff; --ok:#3ecf8e; --warn:#ffb84d;
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--txt);font:13px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;display:flex;flex-direction:column;overflow:hidden}
header{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--panel);border-bottom:1px solid var(--line);flex:0 0 auto}
header h1{font-size:14px;margin:0;font-weight:600;letter-spacing:.2px}
header .file{color:var(--dim);font-size:12px;max-width:38vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
header .spacer{flex:1}
button,select,input{font:inherit;color:var(--txt);background:var(--panel2);border:1px solid var(--line);border-radius:6px;padding:5px 9px}
button{cursor:pointer}
button:hover{border-color:#3d4757;background:#242a35}
button.primary{background:#1b4c86;border-color:#2a6bb5}
button.primary:hover{background:#215c9f}
button:disabled{opacity:.45;cursor:not-allowed}
input[type=number]{width:100%;padding:4px 6px}
input:focus,select:focus{outline:1px solid var(--acc);border-color:var(--acc)}
main{flex:1;display:flex;min-height:0}
aside{width:236px;background:var(--panel);display:flex;flex-direction:column;min-height:0;flex:0 0 auto}
aside.left{border-right:1px solid var(--line)}
aside.right{border-left:1px solid var(--line);width:270px}
.sec{padding:8px 10px;border-bottom:1px solid var(--line);overflow:auto;min-height:0}
.sec.grow{flex:1}
.sec h2{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--dim);margin:0 0 6px;font-weight:600}
#canvasWrap{flex:1;position:relative;min-width:0;background:
  radial-gradient(circle at 30% 20%,#151a22,#0c0f14 70%)}
svg#cad{width:100%;height:100%;display:block;touch-action:none;cursor:crosshair}
.hud{position:absolute;left:10px;bottom:10px;font-size:11px;color:var(--dim);background:#0b0e13cc;padding:4px 8px;border-radius:6px;border:1px solid var(--line);font-variant-numeric:tabular-nums}
.zoombar{position:absolute;right:10px;top:10px;display:flex;gap:6px}
.zoombar button{padding:4px 8px;font-size:12px}
.layer{display:flex;align-items:center;gap:6px;padding:3px 4px;border-radius:5px}
.layer:hover{background:var(--panel2)}
.layer .sw{width:10px;height:10px;border-radius:2px;flex:0 0 auto;border:1px solid #0006}
.layer .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer.off .nm{color:#5d6675;text-decoration:line-through}
.layer button{background:none;border:none;padding:0 3px;color:var(--dim);font-size:12px}
.layer button:hover{color:var(--acc)}
#entList{font-variant-numeric:tabular-nums}
.ent{display:flex;gap:6px;padding:2px 4px;border-radius:4px;cursor:pointer;color:#b9c3d1}
.ent:hover{background:var(--panel2)}
.ent.sel{background:#1e3a5f;color:#dce9ff}
.ent .t{width:44px;color:var(--dim)}
.ent.sel .t{color:#9ec3f0}
.ent .h{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent .l{color:#6f7c8e;max-width:70px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.prop{margin:0 0 8px}
.prop label{display:block;font-size:11px;color:var(--dim);margin-bottom:2px}
.row{display:flex;gap:6px}
.row>*{flex:1;min-width:0}
.chip{display:inline-block;font-size:11px;padding:1px 6px;border-radius:4px;background:var(--panel2);border:1px solid var(--line);color:var(--dim)}
.empty{color:#66707e;font-size:12px;padding:6px 2px}
.drop{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#0b0e13dd;border:2px dashed var(--acc);border-radius:12px;margin:14px;font-size:15px;color:#cfe3ff;z-index:5}
.drop.on{display:flex}
#dropzone{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:12px;color:var(--dim);text-align:center;padding:24px}
#dropzone h3{color:var(--txt);margin:0;font-size:17px;font-weight:600}
#dropzone p{margin:0;max-width:420px}
.filelist{display:flex;flex-direction:column;gap:2px}
.filelist .f{display:flex;gap:6px;align-items:center;padding:3px 4px;border-radius:4px;cursor:pointer}
.filelist .f:hover{background:var(--panel2)}
.filelist .f .nm{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.filelist .f .x{color:#6f7c8e}
.filelist .f .x:hover{color:#ff7b72}
.hidden{display:none!important}
.measure{font-size:11px;color:var(--dim);margin-top:4px}
table.v{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
table.v td{padding:1px}
table.v input{padding:2px 4px;font-size:12px}
.warn{color:var(--warn);font-size:11px;margin-top:6px}
.toast{position:absolute;left:50%;transform:translateX(-50%);bottom:16px;background:#243447;border:1px solid #33507a;color:#e6f0ff;padding:7px 14px;border-radius:8px;font-size:12px;opacity:0;transition:opacity .2s;pointer-events:none}
.toast.on{opacity:1}