:root{--bg-dark: #1a1a1a;--bg-panel: #252525;--bg-card: #2d2d2d;--text-primary: #f0e6d2;--text-secondary: #a0a0a0;--text-accent: #e8c547;--line-red: #c41e3a;--border: #444;--shadow: 0 2px 8px rgba(0,0,0,.4);--highlight: #e8c547;--danger: #c41e3a}*{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;overflow:hidden}body{font-family:Microsoft YaHei,SimHei,sans-serif;background:var(--bg-dark);color:var(--text-primary);display:flex;flex-direction:column}#root{display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.header{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;padding:10px 16px;background:var(--bg-panel);border-bottom:2px solid var(--line-red)}.header h1{font-size:1.2rem;color:var(--text-accent);font-weight:600}.header-actions{display:flex;gap:10px;align-items:center}.board-tabs{display:flex;gap:4px;align-items:center;max-width:400px;overflow-x:auto;padding:2px 0}.board-tab{flex:0 0 auto;padding:6px 12px;background:var(--bg-card);border:1px solid var(--border);color:var(--text-primary);cursor:pointer;border-radius:4px;font-size:.9rem;white-space:nowrap}.board-tab:hover{border-color:var(--text-accent);color:var(--text-accent)}.board-tab.active{border-color:var(--line-red);color:var(--text-accent);background:#c41e3a26}.btn{padding:8px 14px;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:.9rem;transition:all .15s}.btn:hover{border-color:var(--text-accent);color:var(--text-accent)}.btn-primary{background:var(--line-red);border-color:var(--line-red);color:#fff}.btn-primary:hover{filter:brightness(1.15)}.main{flex:1;display:flex;min-height:0}.sidebar{width:200px;flex-shrink:0;background:var(--bg-panel);border-right:1px solid var(--border);padding:12px;display:flex;flex-direction:column;gap:12px;position:relative;transition:width .2s ease}.sidebar-collapsed{width:32px;padding:8px 0;min-width:32px}.sidebar-collapsed .sidebar-section,.sidebar-collapsed .sidebar-section h3,.sidebar-collapsed .sidebar-section .btn{display:none!important}.sidebar-toggle{position:absolute;right:4px;top:8px;width:24px;height:24px;padding:0;border:1px solid var(--border);border-radius:4px;background:var(--bg-card);color:var(--text-primary);cursor:pointer;font-size:.7rem;line-height:1}.sidebar-toggle:hover{border-color:var(--text-accent);color:var(--text-accent)}.sidebar-expand{width:100%;padding:8px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.8rem}.sidebar-expand:hover{color:var(--text-accent)}.sidebar-section{display:flex;flex-direction:column;gap:8px}.sidebar-section h3{font-size:.85rem;color:var(--text-accent);margin-bottom:4px;border-bottom:1px solid var(--border);padding-bottom:4px}.sidebar .btn{width:100%;text-align:left}.canvas-wrap{flex:1;overflow:hidden;position:relative;background:var(--bg-dark)}.board-canvas{width:100%;height:100%;position:relative;overflow:hidden;cursor:default}.board-canvas.pan{cursor:grab}.board-canvas.panning{cursor:grabbing}body.connection-mode .board-canvas{cursor:crosshair}.board-inner{position:absolute;left:50%;top:50%;transform-origin:0 0;width:2000px;height:2000px;margin-left:-1000px;margin-top:-1000px;background:repeating-linear-gradient(0deg,transparent,transparent 49px,rgba(255,255,255,.03) 49px,rgba(255,255,255,.03) 50px),repeating-linear-gradient(90deg,transparent,transparent 49px,rgba(255,255,255,.03) 49px,rgba(255,255,255,.03) 50px)}.connections-layer{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:auto;z-index:1}.connections-layer .connection-line{cursor:pointer;pointer-events:stroke}.elements-layer{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}.elements-layer>*{pointer-events:auto}.board-element{position:absolute;min-width:80px;min-height:40px;background:var(--bg-card);border:2px solid var(--border);border-radius:6px;box-shadow:var(--shadow);cursor:move;-webkit-user-select:none;user-select:none;transition:box-shadow .15s,border-color .15s;display:flex;align-items:center;justify-content:center;padding:8px;word-break:break-word}.board-element:hover{border-color:#e8c54780}.board-element.selected{border-color:var(--highlight);box-shadow:0 0 0 2px #e8c54766}.board-element.text-el{width:180px;min-height:60px;font-size:.9rem;color:var(--text-primary);text-align:left}.board-element.image-el{width:120px;height:120px;padding:4px;overflow:visible;flex-direction:column;align-items:stretch}.board-element.image-el .image-el-content{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;align-items:stretch;width:100%}.board-element.image-el .image-description{font-size:.75rem;color:var(--text-primary);padding:4px 4px 6px;line-height:1.3;word-break:break-word;border-bottom:1px solid var(--border);flex-shrink:0}.board-element.image-el .image-description-placeholder{color:var(--text-secondary)}.board-element.image-el .placeholder{flex:1;min-height:0;background:var(--bg-dark);color:var(--border);font-size:.75rem;display:flex;align-items:center;justify-content:center;text-align:center}.board-element.image-el img{flex:1;min-height:0;width:100%;height:100%;object-fit:contain;object-position:center;display:block}.board-element.block-el{background:#32507826;border:2px dashed #4a6fa5;border-radius:8px;min-width:120px;min-height:80px;flex-direction:column;align-items:stretch;padding:8px}.board-element.block-el .block-description{font-size:.7rem;color:var(--text-secondary);margin-bottom:4px;line-height:1.3;word-break:break-word}.board-element.block-el .block-description-placeholder{color:var(--border)}.board-element.block-el .block-name{font-size:.9rem;color:var(--text-primary)}.board-element.tag-el{min-width:60px;height:32px;font-size:.8rem;border-radius:16px}.board-element.tag-el[data-tag=person]{background:#c41e3a40;border-color:var(--line-red)}.board-element.tag-el[data-tag=place]{background:#32507866;border-color:#4a6fa5}.board-element.tag-el[data-tag=time]{background:#64503266;border-color:#a08050}.connect-dot{position:absolute;width:10px;height:10px;border-radius:50%;background:var(--line-red);opacity:0;transition:opacity .15s;cursor:crosshair;z-index:10;transform:translate(-50%,-50%)}.connect-dot-top{left:50%;top:-5px}.connect-dot-bottom{left:50%;bottom:-5px;top:auto;transform:translate(-50%,50%)}.connect-dot-left{left:-5px;top:50%;transform:translate(-50%,-50%)}.connect-dot-right{right:-5px;left:auto;top:50%;transform:translate(50%,-50%)}.board-element:hover .connect-dot,.board-element.selected .connect-dot,.connect-dot.dragging{opacity:1}.connect-dot:hover{opacity:1;transform:translate(-50%,-50%) scale(1.2)}.connect-dot-bottom:hover{transform:translate(-50%,50%) scale(1.2)}.connect-dot-right:hover{transform:translate(50%,-50%) scale(1.2)}.selection-box{position:absolute;border:2px dashed var(--highlight);background:#e8c5471a;pointer-events:none;z-index:100;display:none}.marquee-box{position:absolute;border:2px dashed var(--highlight);background:#e8c54733;pointer-events:none;z-index:99;box-shadow:0 0 0 1px #e8c5474d;border-radius:2px}.board-canvas:active .marquee-box{border-color:var(--text-accent);background:#e8c54740}.context-menu{position:fixed;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow);padding:4px 0;min-width:140px;z-index:1000;display:none}.context-menu.show{display:block}.context-menu-title{padding:6px 14px 4px;font-size:.75rem;color:var(--text-secondary);border-bottom:1px solid var(--border);margin-bottom:2px}.context-menu button{width:100%;padding:8px 14px;border:none;background:none;color:var(--text-primary);text-align:left;cursor:pointer;font-size:.9rem}.context-menu button:hover{background:var(--bg-card);color:var(--text-accent)}.context-menu-item-with-sub{position:relative;padding:8px 14px;font-size:.9rem;color:var(--text-primary);cursor:default}.context-menu-sub-trigger{display:block}.context-submenu{position:absolute;left:100%;top:0;margin-left:2px;background:var(--bg-panel);border:1px solid var(--border);border-radius:4px;box-shadow:var(--shadow);padding:4px 0;min-width:120px;z-index:1001}.context-submenu button{width:100%;padding:6px 12px;border:none;background:none;color:var(--text-primary);text-align:left;cursor:pointer;font-size:.85rem}.context-submenu button:hover{background:var(--bg-card);color:var(--text-accent)}.component-tree-wrap{width:220px;flex-shrink:0;background:var(--bg-panel);border-left:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden}.component-tree-wrap .component-tree-title{padding:10px 12px;font-size:.85rem;color:var(--text-accent);border-bottom:1px solid var(--border);flex-shrink:0}.component-tree-list{flex:1;overflow-y:auto;padding:8px 0}.component-tree-item{padding:6px 12px 6px 24px;font-size:.8rem;color:var(--text-primary);cursor:pointer;display:flex;align-items:center;gap:6px}.component-tree-item:hover{background:var(--bg-card)}.component-tree-item.selected{background:#e8c54733;color:var(--text-accent)}.component-tree-item.block-child{padding-left:36px}.component-tree-item .tree-type{color:var(--text-secondary);font-size:.7rem}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:flex;align-items:center;justify-content:center;z-index:2000}.modal-dialog{background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;box-shadow:var(--shadow),0 0 0 1px var(--line-red);min-width:320px;max-width:90vw;padding:20px}.modal-dialog-alert{min-width:280px}.modal-title{font-size:1rem;color:var(--text-accent);margin-bottom:14px;padding-bottom:8px;border-bottom:1px solid var(--border)}.modal-message{color:var(--text-primary);font-size:.95rem;margin-bottom:18px;line-height:1.5}.modal-input{width:100%;padding:10px 12px;margin-bottom:16px;background:var(--bg-card);border:1px solid var(--border);border-radius:4px;color:var(--text-primary);font-size:.95rem;font-family:inherit}.modal-input:focus{outline:none;border-color:var(--text-accent)}.modal-input::placeholder{color:var(--text-secondary)}.modal-textarea{resize:vertical;min-height:80px}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.resize-handle{position:absolute;width:10px;height:10px;background:var(--highlight);border:1px solid var(--bg-dark);border-radius:2px;cursor:nwse-resize;z-index:20}.resize-handle.nw{left:-5px;top:-5px;cursor:nwse-resize}.resize-handle.ne{right:-5px;top:-5px;cursor:nesw-resize}.resize-handle.sw{left:-5px;bottom:-5px;cursor:nesw-resize}.resize-handle.se{right:-5px;bottom:-5px;cursor:nwse-resize}.hidden-input{position:absolute;opacity:0;width:0;height:0;pointer-events:none}