*{box-sizing:border-box}body{margin:0;font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif;color:#263247;background:#f8fafc}button,input,select,textarea{font:inherit}button,select{cursor:pointer}button{border:1px solid #dfe4ed;background:white;border-radius:7px;padding:8px 12px;color:#334155;transition:background .12s}button:hover{background:#f0f2fb;border-color:#a8b0cb}button:disabled{opacity:.4;cursor:default}button.primary{background:#4f46e5;border-color:#4f46e5;color:white}button.active{background:#eeedff;color:#4338ca;border-color:#c4bfff}button.danger{color:#be123c}input,textarea,select{border:1px solid #dfe4ed;border-radius:6px;background:white;padding:8px;color:#263247;min-width:0}input:focus,textarea:focus,select:focus,button:focus-visible{outline:2px solid #8b83f5;outline-offset:2px}header{height:76px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid #e0e5ed;background:#fff}.brand{display:flex;align-items:center;gap:9px;font-size:21px;font-weight:750;letter-spacing:-.8px;margin-right:24px}#title{width:260px;border-color:transparent;font-weight:600}#title:hover{border-color:#dfe4ed}#saveState{font-size:12px;color:#7c8797;margin-right:auto;white-space:nowrap}main{height:calc(100dvh - 107px);display:grid;grid-template-columns:216px minmax(300px,1fr) 236px}aside{background:white;padding:22px 16px;overflow:auto}.library{border-right:1px solid #e0e5ed}.panel-heading{font-size:12px;letter-spacing:1.3px;font-weight:750;color:#727e90;margin-bottom:18px;display:flex;justify-content:space-between}#search{width:100%;margin-bottom:16px}.shape-category{font-size:12px;color:#7a8496;margin:18px 0 8px}.shape-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}.shape-button{padding:9px 3px 7px;border:1px solid transparent;background:#f7f9fc;font-size:12px;line-height:1.2;display:flex;flex-direction:column;align-items:center;gap:6px;min-height:80px}.shape-button svg{width:58px;height:36px}.library>button{width:100%;margin-top:12px;font-size:12px}.hint{font-size:12px;color:#7b8797}.workspace{position:relative;overflow:hidden;background:#f8fafc}.toolbar{position:absolute;left:16px;top:16px;right:16px;z-index:2;display:flex;align-items:center;gap:5px;width:max-content;max-width:calc(100% - 32px);flex-wrap:wrap;padding:6px;background:#fff;border:1px solid #e0e5ed;border-radius:10px;box-shadow:0 3px 12px #1b31520a}.toolbar button{border-color:transparent;padding:7px 9px}.toolbar .active{border-color:#d3ceff}.divider{height:24px;width:1px;background:#e0e5ed;margin:0 4px}.snap{display:flex;gap:4px;font-size:12px;align-items:center;margin:0 8px}#canvas{width:100%;height:100%;display:block;touch-action:none}.canvas-bottom{position:absolute;left:18px;bottom:16px;right:18px;display:flex;align-items:end;justify-content:space-between;pointer-events:none;gap:8px}.canvas-bottom>span{font-size:12px;color:#748197;background:#f8fafce8;padding:4px}.canvas-bottom>div{display:flex;align-items:center;gap:6px;pointer-events:auto;background:white;border:1px solid #e0e5ed;padding:4px;border-radius:8px}.canvas-bottom button{border:0;padding:5px 8px}#zoomLabel{font-size:12px;min-width:38px;text-align:center}.inspector{border-left:1px solid #e0e5ed}#empty{text-align:center;padding:35px 4px;color:#8b95a4}#empty h3{font-size:15px;color:#4c586a;margin:12px 0 5px}#empty p{font-size:13px}.empty-icon{font-size:48px;color:#c3c5df}form label{display:flex;flex-direction:column;gap:6px;font-size:12px;color:#6c7789;margin:0 0 16px}textarea{resize:vertical;width:100%;font-size:14px}.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px}input[type=color]{width:100%;height:36px;padding:4px}form button{width:100%;margin-bottom:8px;font-size:12px}.keyboard{border-top:1px solid #e8ecf2;margin-top:25px;padding-top:18px;font-size:12px;color:#8792a2}.keyboard b{color:#68768a}.keyboard p{line-height:1.9}footer{height:31px;border-top:1px solid #e0e5ed;display:flex;justify-content:space-between;padding:6px 20px;font-size:12px;color:#7b8798;background:white}.node{cursor:move}.edge{cursor:pointer}.selection-outline{fill:none;stroke:#6254ed;stroke-width:2;stroke-dasharray:5 3;pointer-events:none}.handle{fill:white;stroke:#6254ed;stroke-width:2;cursor:nwse-resize}#toast{position:fixed;bottom:48px;left:50%;transform:translateX(-50%);padding:10px 18px;border-radius:8px;background:#27334b;color:#fff;box-shadow:0 4px 20px #0002;z-index:10;display:none;max-width:90vw}dialog{border:1px solid #e0e5ed;border-radius:14px;padding:24px;width:520px;max-width:95vw;box-shadow:0 18px 80px #0003}dialog::backdrop{background:#17213b55}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}h2{margin:0;font-size:20px}.file-row{display:flex;align-items:center;gap:8px;padding:12px 0;border-bottom:1px solid #edf0f5}.file-row>button:first-child{flex:1;text-align:left;overflow-wrap:anywhere}#fileList{max-height:55vh;overflow:auto}[hidden]{display:none!important}@media(max-width:1050px){main{grid-template-columns:170px minmax(300px,1fr) 200px}header{padding:0 12px;gap:6px}.brand{margin-right:4px}#title{width:180px}#saveState{display:none}.toolbar{gap:0}.toolbar button{font-size:12px;padding:6px}.snap{display:none}aside{padding:16px 10px}}@media(max-width:760px){header{height:auto;min-height:100px;flex-wrap:wrap;padding:10px}.brand{font-size:18px}#title{flex:1;width:140px}header button,header select{font-size:12px}main{height:calc(100dvh - 132px);grid-template-columns:100px minmax(200px,1fr)}.inspector{position:fixed;right:8px;top:112px;width:190px;max-height:65vh;z-index:4;border:1px solid #dfe4ed;border-radius:8px;box-shadow:0 8px 30px #0001}.inspector:has(#properties[hidden]){display:none}.shape-grid{grid-template-columns:1fr}.panel-heading{font-size:10px}#search{font-size:11px;padding:5px}.canvas-bottom>span{display:none}footer span:last-child{display:none}.keyboard{display:none}.toolbar{left:8px;top:8px}.toolbar #layout{display:none}}
.brand{flex-shrink:0;white-space:nowrap;gap:10px;letter-spacing:-.5px;color:#192f3b;margin-right:12px}.brand img{width:44px;height:33px;object-fit:contain}.brand-desk{font-weight:450;color:#526373}
@media(max-width:760px){.brand{font-size:18px;gap:7px}.brand img{width:36px;height:27px}}
@media print{header,aside,footer,.toolbar,.canvas-bottom,dialog,#toast{display:none!important}main{display:block;height:auto}.workspace{height:95vh;width:100%}#gridRect,.selection-outline,.handle{display:none}body{background:white}}