:root{--cad-bg:#0a1420;--cad-panel:#102231;--cad-line:#28485b;--cad-text:#e0eff5;--cad-muted:#91aab7;--cad-cyan:#51cbb8;--cad-cell:24px}
*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--cad-bg);color:var(--cad-text);font:13px/1.45 system-ui,sans-serif}
button,input,select{font:inherit;color:inherit}button,select,input{border:1px solid var(--cad-line);border-radius:6px;background:#0b1a26;padding:7px}
button{cursor:pointer}.cad-toolbar{height:60px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:7px 14px;border-bottom:1px solid var(--cad-line);background:#0d1d2a}
.cad-toolbar small{display:block;color:var(--cad-muted);font-size:10px}.cad-toolbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.cad-toolbar-actions label{display:flex;align-items:center;gap:5px}.scale-label{color:var(--cad-cyan);font-weight:700}
.cad-layout{height:calc(100dvh - 60px);display:grid;grid-template-columns:190px minmax(0,1fr) 230px;min-height:0}
.cad-library,.cad-properties{overflow:auto;background:var(--cad-panel);padding:12px;border-right:1px solid var(--cad-line)}.cad-properties{border-right:0;border-left:1px solid var(--cad-line)}
.cad-library h2,.cad-properties h2{margin:2px 0 8px;font-size:15px}.cad-library p,.cad-properties p{color:var(--cad-muted);font-size:11px;line-height:1.55}
#componentLibrary{display:grid;gap:7px;margin:12px 0}.cad-part{display:grid;grid-template-columns:34px 1fr;align-items:center;gap:8px;width:100%;text-align:left;padding:8px;background:#0b1a26}.cad-part .symbol{display:grid;place-items:center;width:30px;height:30px;border:1px solid var(--cad-cyan);border-radius:6px;color:var(--cad-cyan);font:700 11px ui-monospace,monospace}
.cad-part[aria-pressed=true],#wireMode[aria-pressed=true]{outline:2px solid var(--cad-cyan);background:#143746}.cad-part small{display:block;color:var(--cad-muted);font-size:10px}
.cad-editor{position:relative;display:flex;flex-direction:column;min-width:0;min-height:0;padding:8px}.cad-workarea{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:26px minmax(0,1fr);flex:1;min-height:0;border:1px solid var(--cad-line);background:#0b1823}
.ruler-corner,.top-ruler,.left-ruler{background:#142b39;color:#9bb5c1;font:10px/1 ui-monospace,monospace;z-index:2}.ruler-corner{display:grid;place-items:center;border-right:1px solid var(--cad-line);border-bottom:1px solid var(--cad-line)}
.top-ruler{position:sticky;top:0;overflow:hidden;height:26px;border-bottom:1px solid var(--cad-line)}.top-ruler>div{display:flex;height:100%;width:max-content}
.top-ruler span{flex:0 0 var(--cad-cell);height:100%;padding-top:7px;text-align:left;border-left:1px solid #385666}
.left-ruler{overflow:hidden;border-right:1px solid var(--cad-line)}.left-ruler>div{display:flex;flex-direction:column;width:100%;height:max-content}
.left-ruler span{flex:0 0 var(--cad-cell);display:grid;place-items:center;border-top:1px solid #385666}
.plan-scroll{overflow:auto;position:relative;min-width:0;min-height:0}.plan-surface{position:relative;width:1920px;height:1008px;background-color:#0e1e2a;background-image:linear-gradient(to right,rgba(105,159,178,.22) 1px,transparent 1px),linear-gradient(to bottom,rgba(105,159,178,.22) 1px,transparent 1px);background-size:var(--cad-cell) var(--cad-cell);touch-action:none}
.wire-layer,.node-layer{position:absolute;inset:0;width:100%;height:100%;overflow:visible}.wire-layer{z-index:1;pointer-events:none}.wire{fill:none;stroke:#f4c46d;stroke-width:2.5;vector-effect:non-scaling-stroke}.wire-label{fill:#f5d891;font:11px ui-monospace,monospace}
.node-layer{z-index:2;pointer-events:none}.cad-node{position:absolute;transform:translate(-50%,-50%);min-width:38px;min-height:34px;padding:3px 5px;background:#102b39;border:1px solid var(--cad-cyan);border-radius:6px;display:grid;place-items:center;gap:0;pointer-events:auto;touch-action:none;cursor:grab;box-shadow:0 2px 8px #0008}.cad-node:active{cursor:grabbing}.cad-node[aria-pressed=true]{outline:2px solid #f5c86d}.cad-node .node-symbol{font:700 11px ui-monospace,monospace;color:var(--cad-cyan)}.cad-node small{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.title-block{position:absolute;right:18px;bottom:34px;z-index:3;width:270px;padding:9px;background:#e5edf0;color:#162b36;border:2px solid #243f4c;box-shadow:0 4px 14px #0006;display:grid;grid-template-columns:1fr 1fr;gap:5px 8px;font:10px ui-monospace,monospace}.title-block>b{grid-column:1/-1;border-bottom:1px solid #778e98;padding-bottom:4px}.title-block label{display:grid;gap:2px}.title-block input{width:100%;padding:3px;border-radius:2px;border-color:#8ba0a8;background:white;color:#152b36;font:10px ui-monospace,monospace}
.cad-status{margin:6px 1px 0;color:var(--cad-muted);font-size:10px}.cad-properties form{display:grid;gap:10px}.cad-properties label{display:grid;gap:4px;color:var(--cad-muted);font-size:11px}.cad-properties input,.cad-properties select{width:100%;color:var(--cad-text)}#deleteComponent{color:#ffb7ab;border-color:#774a49}
@media(max-width:900px){.cad-layout{grid-template-columns:150px minmax(0,1fr)}.cad-properties{position:fixed;right:0;top:60px;bottom:0;width:220px;z-index:5;box-shadow:-8px 0 24px #0008}.cad-toolbar-actions .scale-label{display:none}}
@media(max-width:600px){.cad-layout{grid-template-columns:108px minmax(0,1fr)}.cad-library{padding:8px}.cad-part{grid-template-columns:1fr;text-align:center;justify-items:center;padding:6px}.cad-toolbar{height:auto;min-height:60px;align-items:flex-start}.cad-toolbar-actions{justify-content:flex-end}.cad-properties{width:min(220px,75vw)}.title-block{right:8px;bottom:34px;width:220px}.cad-editor{padding:4px}}