:root{--navy:#2c5f8a;--teal:#2e8b86;--purple:#7a5fa6;--amber:#d98e32;--coral:#c4554d;--ink:#1f2937;--muted:#6b7280;--bg:#f4f6f9;--line:#dde4ec}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{background:var(--bg);color:var(--ink);font-family:Leelawadee UI,Segoe UI,Tahoma,Noto Sans Thai,sans-serif;line-height:1.45}#root{flex-direction:column;display:flex}.app-shell{flex-direction:column;height:100%;display:flex;overflow:hidden}header{color:#fff;text-align:center;background:linear-gradient(135deg,#24506f,#2c5f8a 60%,#2e8b86);flex:none;padding:10px 16px}header h1{font-size:1.1rem}header p{opacity:.85;margin-top:2px;font-size:.74rem}header .nav-tabs{justify-content:center;gap:8px;margin-top:8px;display:flex}header .nav-tabs a{color:#fff;background:#ffffff1f;border:1px solid #ffffff4d;border-radius:999px;padding:4px 12px;font-size:.76rem;font-weight:700;text-decoration:none}header .nav-tabs a.active{color:var(--navy);background:#fff}header .readonly-badge{vertical-align:middle;background:#fff3;border-radius:999px;margin-left:6px;padding:1px 8px;font-size:.65rem;font-weight:800;display:inline-block}.toolbar{border-bottom:1px solid var(--line);z-index:60;background:#fff;flex-wrap:wrap;flex:none;justify-content:center;align-items:center;gap:7px;padding:8px 10px;display:flex;overflow-x:auto}.btn{border:1.5px solid var(--line);color:var(--ink);cursor:pointer;white-space:nowrap;background:#fff;border-radius:999px;align-items:center;gap:5px;padding:6px 14px;font-family:inherit;font-size:.8rem;font-weight:700;display:inline-flex}.btn:hover{border-color:var(--navy);color:var(--navy);background:#f0f6fb}.btn.primary{background:var(--navy);border-color:var(--navy);color:#fff}.btn.primary:hover{background:#244e72}.btn.danger{color:var(--coral);border-color:#f1c6c2}.btn.danger:hover{border-color:var(--coral);background:#fdf1f0}.btn:disabled{opacity:.4;cursor:not-allowed}.zoom-box{color:var(--muted);align-items:center;gap:5px;font-size:.75rem;display:inline-flex}.zoom-box input{width:100px;accent-color:var(--navy)}.legend{color:var(--muted);border-bottom:1px solid var(--line);background:#fff;flex-wrap:wrap;flex:none;justify-content:center;gap:12px;padding:4px 10px 7px;font-size:.72rem;display:flex}.legend span{align-items:center;gap:5px;display:inline-flex}.dot{border-radius:50%;width:9px;height:9px;display:inline-block}.sw{border-top:3px solid #b9c4d2;border-radius:2px;width:26px;display:inline-block}.sw.dashA{border-top:2.5px dashed var(--amber)}.sw.dashP{border-top:2.5px dotted var(--purple)}.canvas{cursor:grab;background-color:#0000;background-image:linear-gradient(#e9eef4 1px,#0000 1px),linear-gradient(90deg,#e9eef4 1px,#0000 1px);background-position:0 0,0 0;background-repeat:repeat,repeat;background-size:26px 26px;background-attachment:scroll,scroll;background-origin:padding-box,padding-box;background-clip:border-box,border-box;flex:auto;position:relative;overflow:auto}.canvas.panning{cursor:grabbing;-webkit-user-select:none;user-select:none}.canvas.linking{cursor:crosshair}.scaler{transform-origin:0 0;position:relative}.world{position:relative}.wires{z-index:1;position:absolute;top:0;left:0;overflow:visible}.wires path.vis{fill:none;pointer-events:none}.wires path.hit{fill:none;stroke:#0000;stroke-width:14px;pointer-events:stroke;cursor:pointer}.wires g.sel path.vis{filter:drop-shadow(0 0 3px #e3574b80);stroke:#e3574b!important}.node{z-index:2;border:2px solid var(--line);cursor:grab;text-align:center;-webkit-user-select:none;user-select:none;background:#fff;border-radius:12px;width:132px;padding:8px 8px 7px;position:absolute;box-shadow:0 1px 5px #1f29371a}.node.readonly{cursor:default}.node:hover{border-color:var(--navy);z-index:3;box-shadow:0 4px 14px #2c5f8a33}.node.selected{border-color:var(--navy);z-index:3;box-shadow:0 0 0 3px #2c5f8a47}.node.dragging{cursor:grabbing;z-index:4;opacity:.92}.node.link-target{border-color:var(--teal);box-shadow:0 0 0 3px #2e8b8666}.node .bar{border-radius:10px 10px 0 0;height:5px;position:absolute;top:0;left:0;right:0}.node .avatar{object-fit:cover;border:1.5px solid var(--line);border-radius:50%;width:34px;height:34px;margin:4px auto 0;display:block}.node .ttl{word-break:break-word;margin-top:3px;font-size:.76rem;font-weight:800;line-height:1.25}.node .ttl .placeholder{color:#9ca3af;font-style:italic;font-weight:600}.node .sub{color:var(--muted);word-break:break-word;font-size:.64rem;line-height:1.25}.node .meta{flex-wrap:wrap;justify-content:center;align-items:center;gap:4px;margin-top:3px;display:flex}.node .lv-tag{color:#fff;border-radius:999px;padding:1px 7px;font-size:.56rem;font-weight:800}.node .stdot{width:9px;height:9px;box-shadow:0 0 0 1.5px #fff, 0 0 0 2.5px var(--line);border-radius:50%}.port{border:2.5px solid var(--navy);cursor:crosshair;z-index:5;opacity:0;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;transition:opacity .12s,transform .12s;display:flex;position:absolute}.port:after{content:"";background:var(--navy);border-radius:50%;width:5px;height:5px}.node:hover .port,.node.selected .port{opacity:1}.port:hover{background:#e3edf5;transform:scale(1.3)}.port.pb{margin-left:-8px;bottom:-9px;left:50%}.port.pt{margin-left:-8px;top:-9px;left:50%}.acts{z-index:6;gap:4px;display:none;position:absolute;top:-13px;right:-9px}.node:hover .acts,.node.selected .acts{display:flex}.acts button{color:#fff;cursor:pointer;border:none;border-radius:50%;justify-content:center;align-items:center;width:23px;height:23px;font-family:inherit;font-size:.68rem;display:flex;box-shadow:0 2px 6px #00000040}.a-add{background:var(--teal)}.a-edit{background:var(--navy)}.a-del{background:var(--coral)}.acts button:hover{filter:brightness(1.12);transform:scale(1.1)}.lmenu{z-index:120;border:1px solid var(--line);background:#fff;border-radius:12px;align-items:center;gap:5px;padding:7px;display:flex;position:fixed;box-shadow:0 8px 30px #0003}.lmenu button{border:1.5px solid var(--line);cursor:pointer;background:#fff;border-radius:8px;padding:4px 9px;font-family:inherit;font-size:.74rem;font-weight:700}.lmenu button:hover{border-color:var(--navy);background:#f0f6fb}.lmenu .del{color:var(--coral);border-color:#f1c6c2}.tg{min-width:22px;height:22px;color:var(--muted);cursor:pointer;z-index:6;background:#fff;border:2px solid #c4ceda;border-radius:999px;justify-content:center;align-items:center;padding:0 5px;font-family:inherit;font-size:.6rem;font-weight:800;display:flex;position:absolute;bottom:-11px;left:50%;transform:translate(-50%)}.tg:hover{border-color:var(--navy);color:var(--navy)}.selbar{z-index:90;color:#fff;background:#1f2937;border-radius:999px;flex-wrap:wrap;align-items:center;gap:8px;max-width:94vw;padding:6px 10px 6px 16px;font-size:.8rem;display:flex;position:fixed;top:100px;left:50%;transform:translate(-50%);box-shadow:0 8px 24px #0000004d}.selbar button{cursor:pointer;border:none;border-radius:999px;padding:5px 13px;font-family:inherit;font-size:.76rem;font-weight:700}.selbar button:hover{filter:brightness(1.15)}.selbar select{cursor:pointer;color:var(--ink);background:#ffffffeb;border:none;border-radius:999px;padding:5px 8px;font-family:inherit;font-size:.74rem;font-weight:700}.sb-up{background:var(--teal);color:#fff}.sb-clear{background:var(--amber);color:#fff}.sb-del{background:var(--coral);color:#fff}.sb-x{color:#fff;background:#ffffff2e}.marq{z-index:80;border:1.5px dashed var(--navy);pointer-events:none;background:#2c5f8a14;border-radius:4px;position:fixed}.overlay{z-index:100;background:#0f172a8c;padding:20px;display:none;position:fixed;inset:0;overflow-y:auto}.overlay.show{justify-content:center;align-items:flex-start;display:flex}.modal{background:#fff;border-radius:16px;width:100%;max-width:440px;margin:36px auto;animation:.18s pop;overflow:hidden;box-shadow:0 20px 60px #0000004d}@keyframes pop{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.m-head{color:#fff;background:var(--navy);padding:13px 18px 11px;position:relative}.m-head h2{font-size:1rem}.m-close{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:50%;width:28px;height:28px;font-size:.95rem;position:absolute;top:9px;right:11px}.m-body{padding:14px 18px 16px}.f{margin-bottom:11px}.f label{color:var(--muted);margin-bottom:3px;font-size:.72rem;font-weight:800;display:block}.f input,.f select,.f textarea{border:1.5px solid var(--line);width:100%;color:var(--ink);background:#fff;border-radius:9px;padding:7px 10px;font-family:inherit;font-size:.86rem}.f input:focus,.f select:focus,.f textarea:focus{border-color:var(--navy);outline:none}.f-row{grid-template-columns:1fr 1fr;gap:9px;display:grid}.f-avatar-row{align-items:center;gap:10px;display:flex}.f-avatar-preview{object-fit:cover;border:1.5px solid var(--line);background:#f4f6f9;border-radius:50%;flex:none;width:46px;height:46px}.f-error{color:var(--coral);margin-top:6px;font-size:.72rem;font-weight:700}.m-foot{justify-content:flex-end;gap:8px;padding:0 18px 16px;display:flex}.toast{color:#fff;z-index:200;opacity:0;pointer-events:none;text-align:center;background:#1f2937;border-radius:999px;max-width:90vw;padding:8px 18px;font-size:.8rem;transition:opacity .25s;position:fixed;bottom:20px;left:50%;transform:translate(-50%)}.toast.show{opacity:1}.stats-text{color:var(--muted);white-space:nowrap;font-size:.74rem;font-weight:700}@media (width<=720px){header h1{font-size:.95rem}header p{display:none}.toolbar{justify-content:flex-start}.zoom-box input{width:64px}.legend span{font-size:.66rem}.selbar{padding:6px 8px 6px 12px;top:auto;bottom:14px}}