/* style.css */
:root{color-scheme:dark;--bg:#10131a;--panel:#171c25;--panel2:#202735;--line:#303949;--text:#edf2f7;--muted:#8d98aa;--accent:#6c8cff;--danger:#ef6f79}
:root[data-theme=light]{color-scheme:light;--bg:#f4f6fa;--panel:#fff;--panel2:#edf1f7;--line:#d6dce6;--text:#1c2430;--muted:#687487;--accent:#4568d9;--danger:#c93649}
*{box-sizing:border-box}html,body,#app{margin:0;height:100%;overflow:hidden;font-family:Inter,system-ui,sans-serif;color:var(--text);background:var(--bg)}button,input,select{font:inherit;color:inherit}button{border:1px solid var(--line);background:var(--panel2);border-radius:6px;min-height:38px;padding:0 11px;cursor:pointer}button:hover{border-color:var(--accent)}button:active{transform:translateY(1px)}.danger{color:var(--danger)}.icon{font-size:19px;padding:0;width:38px}.active,.chosen{background:var(--accent);color:#fff;border-color:var(--accent)}#topbar{height:60px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:18px;padding:0 16px;background:var(--panel)}.brand{display:flex;align-items:center;gap:10px;white-space:nowrap}.logo{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--accent);color:#fff;font-weight:800;font-size:12px}.toolbar{display:flex;align-items:center;gap:7px;flex-wrap:nowrap;overflow:auto;scrollbar-width:none}.toolbar::-webkit-scrollbar{display:none}.divider{width:1px;height:25px;background:var(--line);margin:0 3px}.toggle{font-size:12px}.toolbar span#zoom-readout{font-size:12px;color:var(--muted);min-width:38px;text-align:center}#main{height:calc(100% - 60px);display:grid;grid-template-columns:220px 1fr 270px}#leftbar,#rightbar{background:var(--panel);overflow:auto}.leftbar{}.side-head{padding:14px;border-bottom:1px solid var(--line)}.side-head h2{font-size:14px;margin:0}.side-head input,#shape-search{width:100%;height:38px;border:1px solid var(--line);border-radius:6px;background:var(--bg);padding:0 10px;outline:none}.library{padding:12px;display:grid;gap:8px}.shape-item{width:100%;display:flex;align-items:center;gap:10px;text-align:left;background:transparent}.shape-item span{font-size:24px;width:28px;text-align:center}.shape-item b{font-size:13px;font-weight:500}#canvas-wrap{position:relative;overflow:hidden;background:var(--bg)}#canvas{width:100%;height:100%;display:block;color:var(--text);touch-action:none}.node{cursor:grab}.node:active{cursor:grabbing}.node text{fill:var(--text);font-size:14px;pointer-events:none}.handle{fill:var(--panel);stroke:var(--accent);stroke-width:2}.edge{fill:none;stroke:var(--muted);stroke-width:2;vector-effect:non-scaling-stroke}#canvas-status{position:absolute;bottom:12px;left:12px;display:flex;gap:15px;padding:7px 10px;border:1px solid var(--line);border-radius:6px;background:color-mix(in srgb,var(--panel) 90%,transparent);font-size:12px;color:var(--muted)}#inspector,#layers-panel{padding:14px}.muted{font-size:13px;color:var(--muted);line-height:1.5}label{display:block;font-size:12px;color:var(--muted);margin-bottom:12px}label input,label select{display:block;width:100%;height:36px;margin-top:5px;background:var(--bg);border:1px solid var(--line);border-radius:5px;padding:0 8px;color:var(--text)}.field-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}.layer{width:100%;margin-bottom:6px;text-align:left;display:flex;align-items:center;gap:8px;min-height:34px;font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layer i{width:9px;height:9px;border-radius:50%;flex:none}.modal{position:fixed;inset:0;background:#0008;display:grid;place-items:center;padding:20px;z-index:5}.modal[hidden],#toast[hidden]{display:none}.modal-card{width:min(560px,100%);max-height:90vh;overflow:auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 15px 50px #0008}.modal-head{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--line)}.modal-head h2{font-size:17px;margin:0}.modal-head button{font-size:22px;border:0;background:transparent}.modal-body{padding:18px;line-height:1.55;font-size:14px}.modal-body h3{font-size:14px;margin-top:0}.modal-body td{padding:7px 20px 7px 0;border-bottom:1px solid var(--line)}kbd{background:var(--panel2);padding:3px 6px;border-radius:4px;font-size:11px}#toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--text);color:var(--bg);padding:10px 16px;border-radius:7px;font-size:13px;z-index:10}
@media(max-width:900px){#main{grid-template-columns:180px 1fr}#rightbar{display:none}.brand strong{display:none}.toolbar{gap:5px}.toolbar button{min-height:34px;padding:0 8px}}
@media(max-width:600px){#topbar{height:54px;padding:0 8px;gap:8px}.toolbar button:nth-of-type(n+8){display:none}#main{height:calc(100% - 54px);grid-template-columns:1fr}#leftbar{position:absolute;z-index:3;left:0;top:54px;bottom:0;width:185px;transform:translateX(-100%);transition:.2s}#leftbar:focus-within{transform:none}.brand{display:none}#canvas-status{bottom:8px;left:8px}}