*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #f7f5f0;--canvas-bg: #faf9f6;--grid: #e8e4db;--text: #2c2c2c;--text-muted: #7a7a7a;--accent: #4a6fa5;--accent-light: #6b8ec2;--accent-bg: #e8f0fa;--danger: #c0392b;--danger-bg: #fbeae7;--node-bg: #ffffff;--node-border: #c9c4b8;--node-shadow: rgba(0, 0, 0, .08);--sidebar-bg: #f0ece4;--sidebar-border: #ddd8cc;--toolbar-bg: #ffffff;--toolbar-shadow: rgba(0, 0, 0, .06);--connection: #8b8378;--connection-selected: #4a6fa5;--btn-bg: #e8e4db;--btn-hover: #dbd6ca;--font: "Charter", "Georgia", "Cambria", "Times New Roman", serif;--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-mono: "SFMono-Regular", "Consolas", "Liberation Mono", "Menlo", monospace;radius:6px}html,body,#root{height:100%;overflow:hidden}body{font-family:var(--font-ui);font-size:14px;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}.app{display:flex;flex-direction:column;height:100vh;width:100vw}.toolbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--toolbar-bg);border-bottom:1px solid var(--sidebar-border);box-shadow:0 1px 4px var(--toolbar-shadow);z-index:10;flex-shrink:0}.toolbar-left{flex-shrink:0}.toolbar-center{flex:1;display:flex;justify-content:center}.toolbar-right{flex-shrink:0;min-width:140px;text-align:right}.app-title{font-family:var(--font);font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.01em;white-space:nowrap}.title-icon{margin-right:6px}.add-node-form{display:flex;gap:8px;max-width:400px;width:100%}.node-input{flex:1;padding:7px 12px;border:1px solid var(--node-border);border-radius:var(--radius);font-family:var(--font);font-size:.95rem;background:var(--canvas-bg);color:var(--text);outline:none;transition:border-color .2s}.node-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg)}.node-input::placeholder{color:var(--text-muted);font-style:italic}.btn{display:inline-flex;align-items:center;justify-content:center;padding:7px 14px;border:1px solid var(--node-border);border-radius:var(--radius);font-family:var(--font-ui);font-size:.82rem;font-weight:500;cursor:pointer;background:var(--btn-bg);color:var(--text);transition:background .15s,border-color .15s,opacity .15s;white-space:nowrap}.btn:hover{background:var(--btn-hover)}.btn:disabled{opacity:.4;cursor:default}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover{background:var(--accent-light);border-color:var(--accent-light)}.btn-action{width:100%;justify-content:flex-start;padding:8px 12px;font-size:.8rem}.btn-save{background:var(--accent);color:#fff;border-color:var(--accent);flex-shrink:0}.btn-save:hover{background:var(--accent-light)}.btn-load{width:100%;justify-content:flex-start;padding:6px 10px;font-size:.78rem;background:var(--canvas-bg)}.btn-load:hover{background:var(--btn-bg)}.mode-badge{display:inline-block;padding:4px 10px;border-radius:12px;font-size:.75rem;font-weight:600;animation:pulse 1.5s ease-in-out infinite}.connect-mode{background:var(--accent-bg);color:var(--accent);border:1px solid var(--accent)}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}.main-area{display:flex;flex:1;overflow:hidden}.sidebar{width:240px;flex-shrink:0;background:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);padding:16px;overflow-y:auto;display:flex;flex-direction:column;gap:18px}.sidebar-section{display:flex;flex-direction:column;gap:6px}.sidebar-heading{font-family:var(--font);font-size:.82rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);margin-bottom:4px}.map-name-input{padding:6px 10px;border:1px solid var(--node-border);border-radius:var(--radius);font-family:var(--font);font-size:.85rem;background:var(--canvas-bg);color:var(--text);outline:none}.map-name-input:focus{border-color:var(--accent)}.save-row{display:flex;gap:6px}.slot-input{flex:1;padding:6px 10px;border:1px solid var(--node-border);border-radius:var(--radius);font-family:var(--font-mono);font-size:.8rem;background:var(--canvas-bg);color:var(--text);outline:none;min-width:0}.slot-input:focus{border-color:var(--accent)}.saved-list{display:flex;flex-direction:column;gap:3px;margin-top:4px}.saved-label{font-size:.75rem;color:var(--text-muted);margin-bottom:2px}.help-list{list-style:none;display:flex;flex-direction:column;gap:5px}.help-list li{font-size:.75rem;color:var(--text-muted);line-height:1.4;padding-left:12px;position:relative}.help-list li:before{content:"·";position:absolute;left:0;color:var(--accent);font-weight:700}.stats{flex-direction:row;gap:12px;font-size:.75rem;color:var(--text-muted);font-family:var(--font-mono);padding-top:8px;border-top:1px solid var(--sidebar-border);margin-top:auto}.canvas{flex:1;position:relative;overflow:hidden;background:var(--canvas-bg);background-image:radial-gradient(circle,var(--grid) 1px,transparent 1px);background-size:24px 24px;cursor:default;touch-action:none}.connections-svg{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:1}.connections-svg line,.connections-svg circle{pointer-events:auto}.connection-line{stroke:var(--connection);stroke-width:2;stroke-linecap:round;cursor:pointer;transition:stroke .15s,stroke-width .15s}.connection-line:hover{stroke-width:3}.connection-selected{stroke:var(--connection-selected);stroke-width:3}.connection-dot{fill:var(--connection);transition:r .15s,fill .15s}.dot-selected{fill:var(--connection-selected)}.connection-preview{stroke:var(--accent);stroke-width:2;stroke-dasharray:6 4;opacity:.5}.node{position:absolute;z-index:2;display:flex;align-items:center;justify-content:center;padding:10px 14px;background:var(--node-bg);border:1.5px solid var(--node-border);border-radius:8px;box-shadow:0 2px 8px var(--node-shadow);cursor:grab;-webkit-user-select:none;user-select:none;transition:border-color .15s,box-shadow .15s,transform .05s;touch-action:none}.node:hover{border-color:var(--accent-light);box-shadow:0 3px 12px var(--node-shadow)}.node:active{cursor:grabbing}.node-selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-bg),0 3px 12px var(--node-shadow)}.node-source{border-color:var(--accent);background:var(--accent-bg)}.node-text{font-family:var(--font);font-size:.92rem;color:var(--text);text-align:center;line-height:1.3;word-break:break-word}.empty-hint{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;color:var(--text-muted);font-family:var(--font);font-style:italic;font-size:1.05rem;pointer-events:none;z-index:0}@media(max-width:768px){.toolbar{flex-wrap:wrap;gap:8px;padding:8px 12px}.toolbar-left{order:1;flex:1}.toolbar-right{order:2;min-width:auto}.toolbar-center{order:3;flex-basis:100%;justify-content:stretch}.add-node-form{max-width:none}.main-area{flex-direction:column}.sidebar{width:100%;flex-direction:row;flex-wrap:wrap;gap:12px;padding:10px 12px;border-right:none;border-bottom:1px solid var(--sidebar-border);max-height:180px;overflow-y:auto}.sidebar-section{flex:1;min-width:140px}.stats{border-top:none;padding-top:0;margin-top:0}.canvas{flex:1;min-height:300px}}@media(max-width:480px){.app-title{font-size:1rem}.node-input{font-size:.85rem;padding:6px 10px}.btn{padding:6px 10px;font-size:.78rem}.node{padding:8px 10px;border-radius:6px}.node-text{font-size:.82rem}}