*{box-sizing:border-box;margin:0}html,body,#root{height:100%}body{color:#1a1a1a;font:13px/1.4 system-ui,sans-serif}.app{--palette-w:232px;--props-w:280px;grid-template-rows:auto 1fr 24px;grid-template-areas:"toolbar toolbar toolbar""palette center props""status status status";grid-template-columns:var(--palette-w) 1fr var(--props-w);height:100%;display:grid}.app.no-palette{--palette-w:24px}.app.no-props{--props-w:24px}.panel-strip{cursor:pointer;color:#556;writing-mode:vertical-rl;background:#f0f0f4;border:none;padding:12px 4px;font-size:11px}.panel-strip:hover{color:#2b6cb0;background:#e4e8f0}.strip-left{border-right:1px solid #d5d5d5;grid-area:palette}.strip-right{border-left:1px solid #d5d5d5;grid-area:props}.panel-collapse{cursor:pointer;color:#99a;background:0 0;border:none;padding:2px 6px;font-size:14px}.panel-collapse:hover{color:#2b6cb0}.palette-head{align-items:center;display:flex}.palette-head .palette-search{flex:1;margin-right:2px}.props-head{justify-content:flex-end;margin:-6px -6px 0 0;display:flex}.center{flex-direction:column;grid-area:center;min-width:0;min-height:0;display:flex}.toolbar{background:#f7f7f7;border-bottom:1px solid #d5d5d5;flex-wrap:wrap;grid-area:toolbar;align-items:center;gap:4px 6px;min-height:40px;padding:4px 12px;display:flex}.palette{background:#fafafa;border-right:1px solid #d5d5d5;grid-area:palette;overflow-y:auto}.canvas-host{background:#e8e8ec;flex:1;position:relative;overflow:hidden}.props{background:#fafafa;border-left:1px solid #d5d5d5;grid-area:props;padding:10px;overflow-y:auto}.status{color:#555;background:#f7f7f7;border-top:1px solid #d5d5d5;grid-area:status;align-items:center;gap:16px;padding:0 12px;font-size:12px;display:flex}.palette-search{width:calc(100% - 16px);font:inherit;border:1px solid #ccc;border-radius:4px;margin:8px;padding:5px 8px}.palette-cat{text-align:left;width:100%;font:inherit;cursor:pointer;color:#333;background:0 0;border:none;padding:6px 10px;font-weight:600;display:block}.palette-grid{grid-template-columns:repeat(3,1fr);gap:2px;padding:0 6px 8px;display:grid}.palette-entry{cursor:grab;color:#111;border:1px solid #0000;border-radius:4px;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;display:flex}.palette-entry:hover{background:#fff;border-color:#b5b5c5}.palette-preview{width:36px;height:32px}.palette-label{color:#555;text-align:center;text-overflow:ellipsis;white-space:nowrap;max-width:64px;font-size:9.5px;line-height:1.1;overflow:hidden}.tb-coffee{color:#fff;white-space:nowrap;background:linear-gradient(135deg,#f7b733,#ec4899);border-radius:999px;align-self:center;margin-right:6px;padding:4px 10px;font-size:11.5px;font-weight:700;text-decoration:none;transition:transform .12s,box-shadow .12s;box-shadow:0 1px 4px #ec489959}.tb-coffee:hover{color:#fff;transform:translateY(-1px);box-shadow:0 3px 9px #ec489980}.update-toast{z-index:60;color:#eef2fa;background:#1b2233;border-radius:10px;align-items:center;gap:12px;padding:12px 16px;font-size:13px;display:flex;position:fixed;bottom:40px;right:16px;box-shadow:0 8px 28px #00000059}.update-toast button{color:#08101f;cursor:pointer;background:#4da3ff;border:none;border-radius:6px;padding:6px 14px;font-weight:700}.update-toast button:hover{background:#6db4ff}.palette-more{width:calc(100% - 12px);font:inherit;color:#556;cursor:pointer;background:0 0;border:1px dashed #b5b5c5;border-radius:4px;margin:0 6px 8px;padding:3px 0;font-size:10.5px;display:block}.palette-more:hover{background:#fff;border-style:solid}.palette-subhead{letter-spacing:.6px;text-transform:uppercase;color:#778;padding:2px 10px;font-size:9.5px;font-weight:700}.prop-title{color:#333;margin:10px 0 6px;font-weight:600}.prop-field{color:#555;text-transform:capitalize;flex-direction:column;gap:3px;margin-bottom:8px;font-size:12px;display:flex}.prop-field input,.prop-field select{font:inherit;text-transform:none;border:1px solid #ccc;border-radius:4px;padding:4px 6px}.prop-check{align-items:center;gap:6px;margin:8px 0;display:flex}.prop-group{margin:10px 0}.prop-row{align-items:center;gap:8px;margin-top:8px;display:flex}.prop-hint{color:#888;font-size:11px}.scale-value{text-align:center;color:#333;min-width:36px;font-size:12px}.prop-row button:disabled{opacity:.4;cursor:default}.tag-row{align-items:center;gap:4px;margin-bottom:4px;display:flex}.tag-row input{min-width:0;font:inherit;border:1px solid #ccc;border-radius:4px;padding:4px 6px}.tag-letters{text-transform:uppercase;width:56px}.tag-loop{width:52px}.tag-suffix{text-transform:uppercase;width:28px}.tag-auto{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 8px}.tag-expansion{color:#2b6cb0;margin:2px 0 4px;font-size:11.5px}.tag-error{color:#c53030;margin:2px 0 4px;font-size:11.5px}button{font:inherit}.drawer{background:#fafafa;border-top:1px solid #d5d5d5;flex-direction:column;max-height:180px;display:flex}.drawer-tabs{gap:2px;padding:4px 8px 0;display:flex}.drawer-tabs button{cursor:pointer;background:#efefef;border:1px solid #d5d5d5;border-bottom:none;border-radius:6px 6px 0 0;padding:3px 12px;font-size:12px}.drawer-tabs button.active{background:#fff;font-weight:600}.drawer-list{background:#fff;border-top:1px solid #d5d5d5;padding:6px 8px;overflow-y:auto}.drawer-group{color:#555;margin:6px 0 2px;font-size:12px;font-weight:600}.drawer-item{text-align:left;cursor:pointer;color:#333;background:0 0;border:none;border-radius:3px;width:100%;padding:3px 6px;font-size:12px;display:block}.drawer-item:hover{background:#eef2f7}.drawer-empty{color:#888;background:#fff;border-top:1px solid #d5d5d5;padding:10px;font-size:12px}.status-warn{color:#b7791f;font-weight:600}.loop-hint{color:#b7791f}.toolbar button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 10px}.toolbar button:hover{background:#eef2f7}.app-name{margin-right:4px}.doc-name{color:#666;text-overflow:ellipsis;white-space:nowrap;max-width:180px;font-size:12px;overflow:hidden}.tb-sep{background:#d5d5d5;width:1px;height:20px;margin:0 2px}.tb-grow{flex:1}.tb-line{color:#555;align-items:center;gap:5px;font-size:12px;display:flex}.tb-line select{font:inherit;border:1px solid #ccc;border-radius:4px;max-width:150px;padding:3px 4px}.sheet-tabs{background:#ececf0;border-top:1px solid #d5d5d5;align-items:center;gap:2px;padding:3px 8px 0;display:flex;overflow-x:auto}.sheet-tab{cursor:pointer;white-space:nowrap;background:#e0e0e6;border:1px solid #d5d5d5;border-bottom:none;border-radius:6px 6px 0 0;align-items:center;gap:4px;padding:3px 10px;font-size:12px;display:flex}.sheet-tab.active{background:#fff;font-weight:600}.sheet-tab input{font:inherit;border:1px solid #aaa;border-radius:3px;width:90px}.sheet-close{cursor:pointer;color:#888;background:0 0;border:none;padding:0 2px;font-size:13px}.sheet-close:hover{color:#c00}.sheet-add{cursor:pointer;color:#555;background:0 0;border:none;padding:2px 8px;font-size:13px}.tb-template{font:inherit;background:#fff;border:1px solid #ccc;border-radius:4px;max-width:118px;padding:3px 4px}.search-overlay{z-index:40;background:#14141e40;justify-content:center;align-items:flex-start;padding-top:12vh;display:flex;position:fixed;inset:0}.search-box{background:#fff;border-radius:8px;width:420px;overflow:hidden;box-shadow:0 12px 40px #00000040}.search-box input{border:none;outline:none;width:100%;padding:12px 14px;font-size:15px}.search-box ul{border-top:1px solid #e5e5ea;max-height:300px;list-style:none;overflow-y:auto}.search-box li{cursor:pointer;justify-content:space-between;padding:7px 14px;font-size:13px;display:flex}.search-box li.active{background:#eef2f7}.search-sheet{color:#888;font-size:12px}.search-empty{color:#888;border-top:1px solid #e5e5ea;padding:10px 14px;font-size:13px}.align-grid{grid-template-columns:1fr 1fr 1fr;gap:4px;margin-bottom:10px;display:grid}.align-grid button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:4px 2px;font-size:11px}.align-grid button:hover{background:#eef2f7}.loop-row{align-items:center;gap:4px;display:flex}.loop-row .drawer-item{flex:1}.loop-diagram-btn{cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #ccc;border-radius:4px;padding:2px 8px;font-size:11px}.loop-diagram-btn:hover{background:#eef2f7}.datasheet-box{background:#fff;border-radius:8px;flex-direction:column;width:520px;max-height:80vh;display:flex;box-shadow:0 12px 40px #00000040}.datasheet-head{border-bottom:1px solid #e2e2e8;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.datasheet-sub{color:#666;font-size:12px}.datasheet-body{padding:8px 16px 16px;overflow-y:auto}.datasheet-field{color:#444;grid-template-columns:160px 1fr;align-items:center;gap:8px;margin:4px 0;font-size:12px;display:grid}.datasheet-field input{font:inherit;border:1px solid #ccc;border-radius:4px;padding:4px 6px}.palette-import{cursor:pointer;color:#445;background:#fff;border:1px dashed #aab;border-radius:4px;width:calc(100% - 16px);margin:0 8px 6px;padding:5px;font-size:12px;display:block}.typical-list{flex-direction:column;gap:3px;padding:0 8px 8px;display:flex}.typical-entry{text-align:left;cursor:pointer;color:#234;background:#f4f7fc;border:1px solid #cfd6e4;border-radius:4px;padding:5px 8px;font-size:12px}.typical-entry:hover{background:#e3ecf9;border-color:#2b6cb0}.advisor-row{align-items:center;gap:4px;display:flex}.advisor-row .drawer-item{flex:1}.advisor-fix{color:#2b6cb0;cursor:pointer;white-space:nowrap;background:#fff;border:1px solid #2b6cb0;border-radius:4px;padding:2px 10px;font-size:11px}.advisor-fix:hover{color:#fff;background:#2b6cb0}.export-menu{position:relative}.export-menu>button.on{background:#dbeafe;border-color:#2b6cb0}.export-pop{z-index:35;background:#fff;border:1px solid #c5c5d5;border-radius:8px;min-width:190px;padding:6px;position:absolute;top:calc(100% + 4px);right:0;box-shadow:0 8px 24px #0000002e}.export-title{text-transform:uppercase;letter-spacing:.04em;color:#889;padding:6px 8px 2px;font-size:10.5px;font-weight:600}.export-item{text-align:left;cursor:pointer;width:100%;font:inherit;color:#223;background:0 0;border:none;border-radius:4px;padding:5px 8px;font-size:12.5px;display:block}.export-item:hover{color:#2b6cb0;background:#eef2f7}.history-row{cursor:pointer;width:100%;font:inherit;background:#fff;border:1px solid #d5d5d5;border-radius:5px;justify-content:space-between;align-items:center;margin:3px 0;padding:8px 10px;display:flex}.history-row:hover{background:#eef2f7;border-color:#2b6cb0}.history-row span{color:#778;font-size:12px}.palette-import:hover{background:#eef2f7}.import-note{color:#885;background:#fdf6e3;border:1px solid #eadfad;border-radius:4px;margin:0 0 8px;padding:6px 8px;font-size:11px}.import-paste{border:1px solid #ccc;border-radius:4px;width:100%;height:80px;margin-top:8px;padding:6px;font:11px monospace}.import-warn{color:#b7791f;margin:2px 0;font-size:11px}.import-preview{cursor:crosshair;background:#fff;border:1px solid #d5d5d5;border-radius:4px;width:100%;max-height:220px;margin:8px 0}.import-save{color:#fff;cursor:pointer;background:#2b6cb0;border:1px solid #2b6cb0;border-radius:4px;width:100%;padding:8px}.import-save:disabled{opacity:.5;cursor:default}.update-chip{color:#2b6cb0;cursor:pointer;background:#eef2f7;border:1px solid #2b6cb0;border-radius:10px;padding:1px 10px;font-size:11px}.pid-port-dot{fill:#fff;stroke:#93a4bd;stroke-width:1.2px;opacity:0;transition:opacity .12s}.joint-element:hover .pid-port-dot{opacity:1;stroke:#2b6cb0;fill:#dbeafe;r:4px}.pid-linking .pid-port-dot,.pid-pinning .pid-port-dot{opacity:1}.pid-pinning [joint-selector=hit]{cursor:crosshair!important}.arm-on{color:#2b6cb0;background:#dbeafe!important;border-color:#2b6cb0!important}.pid-port-hit:hover{fill:#2b6cb038;stroke:#2b6cb0}.pid-port-hit.available-magnet{fill:#2b6cb01f;stroke:#2b6cb0;stroke-width:1.25px;r:5px}.line-popover{z-index:30;background:#fff;border:1px solid #c5c5d5;border-radius:6px;align-items:center;gap:4px;padding:4px 6px;display:flex;position:fixed;transform:translate(14px,calc(-100% - 14px));box-shadow:0 4px 14px #0000002e}.line-popover select{font:inherit;border:1px solid #ccc;border-radius:4px;max-width:160px;padding:2px 4px;font-size:12px}.line-popover button{cursor:pointer;background:#fff;border:1px solid #ccc;border-radius:4px;padding:2px 7px;font-size:12px}.line-popover button:hover{background:#eef2f7}.line-popover button.on{color:#2b6cb0;background:#dbeafe;border-color:#2b6cb0}