:root{--bg-primary: #faf7f2;--bg-secondary: #f3ece1;--bg-card: #ffffff;--text-primary: #4a3f35;--text-secondary: #9a8e82;--text-placeholder: #c4b8aa;--border: #e8dfcf;--border-light: #f0e9dd;--shadow-sm: 0 2px 8px rgba(139, 119, 92, .06);--shadow-md: 0 4px 16px rgba(139, 119, 92, .1);--shadow-lg: 0 8px 32px rgba(139, 119, 92, .14);--shadow-glow: 0 0 0 3px rgba(193, 170, 135, .3);--color-coral: #fde2d7;--color-coral-deep: #f5c4b0;--color-lavender: #e4d9f5;--color-lavender-deep: #cdbceb;--color-mint: #d4f1e3;--color-mint-deep: #b0e3c9;--color-sky: #d5e8f5;--color-sky-deep: #b3d4ec;--color-amber: #fcefc7;--color-amber-deep: #f5df9a;--color-rose: #f9d5dd;--color-rose-deep: #f0b3c2;--color-mustard: #fdefe1;--color-mustard-deep: #e8c678;--color-sage: #e8ede3;--color-sage-deep: #9eb596;--color-blush: #fde8e5;--color-blush-deep: #eca79c;--color-slate: #e9ecef;--color-slate-deep: #a5b1c2;--grid-color: #e0d8cc;--grid-dot-size: 1.5px;--grid-spacing: 28px;--toolbar-bg: rgba(255, 252, 247, .92);--toolbar-border: rgba(232, 223, 207, .6);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 24px;--radius-pill: 999px;--font: "Nunito", system-ui, -apple-system, sans-serif}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html,body{width:100%;height:100%;overflow:hidden;font-family:var(--font);color:var(--text-primary);background:var(--bg-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#app{width:100%;height:100%;position:relative}#canvas-viewport{width:100%;height:100%;position:absolute;top:0;left:0;overflow:hidden;cursor:default}#canvas-viewport.panning{cursor:grabbing!important}#canvas-viewport.space-held{cursor:grab}#canvas-viewport.connect-mode{cursor:crosshair}#canvas-world{position:absolute;top:0;left:0;width:100%;height:100%;transform-origin:0 0;background-image:radial-gradient(circle,var(--grid-color) var(--grid-dot-size),transparent var(--grid-dot-size));background-size:var(--grid-spacing) var(--grid-spacing)}#connections-layer{position:absolute;top:0;left:0;width:100%;height:100%;overflow:visible;pointer-events:none;z-index:0}.connection-path{fill:none;stroke:var(--text-secondary);stroke-width:2.5;stroke-linecap:round;opacity:.5;transition:opacity .2s,stroke .2s}.connection-group{pointer-events:auto;cursor:pointer}.connection-group:hover .connection-path{opacity:.85;stroke:var(--text-primary);stroke-width:3}.connection-hit-area{fill:none;stroke:transparent;stroke-width:20;pointer-events:stroke}.connection-delete-circle{fill:var(--bg-card);stroke:var(--border);stroke-width:1.5;opacity:0;transition:opacity .2s;cursor:pointer}.connection-delete-text{fill:var(--text-secondary);font-size:14px;font-weight:700;text-anchor:middle;dominant-baseline:central;pointer-events:none;opacity:0;transition:opacity .2s}.connection-group:hover .connection-delete-circle,.connection-group:hover .connection-delete-text{opacity:1}.connection-temp{fill:none;stroke:var(--text-secondary);stroke-width:2;stroke-dasharray:8 4;opacity:.5;pointer-events:none}.card{position:absolute;background:var(--bg-card);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:1.5px solid var(--border-light);z-index:1;transition:box-shadow .2s,border-color .2s;animation:cardAppear .3s cubic-bezier(.34,1.56,.64,1) forwards;user-select:none;-webkit-user-select:none;display:flex;flex-direction:column}.card:hover{box-shadow:var(--shadow-md)}.card.selected{box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:var(--text-secondary);z-index:10}.card.dragging{box-shadow:var(--shadow-lg);opacity:.92;z-index:100;transition:none}.card.resizing{transition:none;z-index:100}.resize-handle{position:absolute;bottom:0;right:0;width:20px;height:20px;cursor:se-resize;z-index:10}.resize-handle:after{content:"";position:absolute;bottom:4px;right:4px;width:0;height:0;border-style:solid;border-width:0 0 8px 8px;border-color:transparent transparent var(--text-placeholder) transparent}.card.connect-source{border-color:var(--text-primary);box-shadow:var(--shadow-lg),0 0 0 4px #4a3f3533;animation:connectPulse 1.5s ease-in-out infinite}@keyframes cardAppear{0%{opacity:0;transform:scale(.85) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes connectPulse{0%,to{box-shadow:var(--shadow-lg),0 0 0 3px #4a3f3526}50%{box-shadow:var(--shadow-lg),0 0 0 6px #4a3f3514}}.card:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:4px;border-radius:0 4px 4px 0;background:var(--card-accent, var(--color-coral));opacity:.7;transition:opacity .2s}.card:hover:before,.card.selected:before{opacity:1}.card-header{display:flex;align-items:center;justify-content:space-between;padding:6px 10px 4px 16px;cursor:grab;min-height:28px}.card-header:active{cursor:grabbing}.card-drag-handle{color:var(--text-placeholder);font-size:11px;letter-spacing:2px;opacity:.5;transition:opacity .2s;-webkit-user-select:none;user-select:none}.card:hover .card-drag-handle{opacity:.8}.card-delete-btn{display:flex;align-items:center;justify-content:center;width:22px;height:22px;border:none;background:none;color:var(--text-placeholder);font-size:18px;font-weight:600;cursor:pointer;border-radius:50%;opacity:0;transition:all .2s;line-height:1}.card:hover .card-delete-btn{opacity:.6}.card-delete-btn:hover{opacity:1!important;background:#dc64641a;color:#c44}.card-body{padding:0 14px 12px 18px;flex:1;display:flex;flex-direction:column;overflow:hidden}.card-content{outline:none;color:var(--text-primary);font-size:14px;line-height:1.6;min-height:24px;word-break:break-word;cursor:text;flex:1;overflow-y:auto;overflow-x:hidden}.card-content:empty:before{content:attr(data-placeholder);color:var(--text-placeholder);pointer-events:none}.card-content.font-sm{font-size:12px}.card-content.font-md{font-size:14px}.card-content.font-lg{font-size:18px;font-weight:600}.card-note{min-width:180px;max-width:400px;min-height:100px}.card-image-type{min-width:160px;max-width:500px;overflow:hidden}.card-image-type .card-body{padding:0 0 8px}.card-image{width:100%;display:block;border-radius:0;object-fit:cover;max-height:400px;background:var(--bg-secondary)}.card-image-type .card-content{padding:8px 14px 4px 18px;font-size:12px;color:var(--text-secondary)}.card-mindmap{min-width:100px;max-width:320px;border-radius:var(--radius-pill);background:var(--card-accent, var(--color-coral));border-color:transparent}.card-mindmap:before{display:none}.card-mindmap .card-header{padding:4px 10px 2px 14px;min-height:24px}.card-mindmap .card-body{padding:0 18px 10px}.card-mindmap .card-content{font-size:15px;font-weight:600;text-align:center;min-height:20px;color:var(--text-primary)}.card-mindmap .card-drag-handle{display:none}.card-mindmap .card-delete-btn{position:absolute;right:4px;top:4px}#card-actions{position:absolute;display:flex;align-items:center;gap:6px;padding:6px 10px;background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-md);z-index:200;animation:actionsAppear .2s ease-out;pointer-events:auto}#card-actions.hidden{display:none}@keyframes actionsAppear{0%{opacity:0;transform:translateY(6px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.actions-colors{display:grid;grid-template-columns:repeat(5,1fr);gap:6px 4px}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .15s}.color-dot[data-color=coral]{background:var(--color-coral-deep)}.color-dot[data-color=lavender]{background:var(--color-lavender-deep)}.color-dot[data-color=mint]{background:var(--color-mint-deep)}.color-dot[data-color=sky]{background:var(--color-sky-deep)}.color-dot[data-color=amber]{background:var(--color-amber-deep)}.color-dot[data-color=rose]{background:var(--color-rose-deep)}.color-dot[data-color=mustard]{background:var(--color-mustard-deep)}.color-dot[data-color=sage]{background:var(--color-sage-deep)}.color-dot[data-color=blush]{background:var(--color-blush-deep)}.color-dot[data-color=slate]{background:var(--color-slate-deep)}.color-dot:hover{transform:scale(1.2)}.color-dot.active{border-color:var(--text-primary);transform:scale(1.15)}.actions-divider{width:1px;height:18px;background:var(--border);margin:0 2px}.action-btn{display:flex;align-items:center;justify-content:center;width:28px;height:28px;border:none;background:none;color:var(--text-secondary);font-size:14px;font-weight:700;font-family:var(--font);cursor:pointer;border-radius:var(--radius-sm);transition:all .15s}.action-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.action-delete:hover{background:#dc64641a;color:#c44}#toolbar{position:fixed;bottom:20px;left:50%;transform:translate(-50%);z-index:500;animation:toolbarEnter .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes toolbarEnter{0%{opacity:0;transform:translate(-50%) translateY(30px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.toolbar-inner{display:flex;align-items:center;gap:4px;padding:8px 12px;background:var(--toolbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--toolbar-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-lg)}.toolbar-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 14px;border:none;background:none;color:var(--text-secondary);font-family:var(--font);font-size:11px;font-weight:600;cursor:pointer;border-radius:var(--radius-md);transition:all .2s;white-space:nowrap}.toolbar-btn:hover{background:var(--bg-secondary);color:var(--text-primary);transform:translateY(-2px)}.toolbar-btn:active{transform:translateY(0)}.toolbar-btn.active{background:var(--text-primary);color:var(--bg-primary)}.toolbar-btn svg{flex-shrink:0}.toolbar-divider{width:1px;height:32px;background:var(--border);margin:0 4px}#menu-dropdown{position:fixed;bottom:90px;right:calc(50% - 180px);min-width:200px;padding:6px;background:var(--toolbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--toolbar-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);z-index:600;animation:menuAppear .2s ease-out}#menu-dropdown.hidden{display:none}@keyframes menuAppear{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:10px 14px;border:none;background:none;color:var(--text-primary);font-family:var(--font);font-size:13px;font-weight:500;cursor:pointer;border-radius:var(--radius-sm);transition:background .15s;text-align:left}.menu-item:hover{background:var(--bg-secondary)}.menu-item svg{flex-shrink:0;color:var(--text-secondary)}.menu-danger{color:#c44}.menu-danger svg{color:#c44}.menu-danger:hover{background:#dc646414}.menu-divider{height:1px;background:var(--border-light);margin:4px 8px}#welcome-overlay{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#faf7f299;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .4s ease-out}#welcome-overlay.hidden{display:none}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.welcome-card{background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:40px 48px;max-width:440px;width:90%;text-align:center;box-shadow:var(--shadow-lg);animation:welcomeAppear .5s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes welcomeAppear{0%{opacity:0;transform:scale(.9) translateY(16px)}to{opacity:1;transform:scale(1) translateY(0)}}.welcome-icon{font-size:48px;margin-bottom:12px}.welcome-card h1{font-size:24px;font-weight:700;color:var(--text-primary);margin-bottom:6px}.welcome-card>p{color:var(--text-secondary);font-size:15px;margin-bottom:28px}.welcome-tips{display:flex;flex-direction:column;gap:12px;margin-bottom:28px;text-align:left}.tip{display:flex;align-items:center;gap:12px;padding:10px 14px;background:var(--bg-secondary);border-radius:var(--radius-sm);font-size:13px;color:var(--text-primary)}.tip-icon{font-size:18px;flex-shrink:0}.welcome-btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 32px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:var(--radius-pill);font-family:var(--font);font-size:15px;font-weight:600;cursor:pointer;transition:all .2s;box-shadow:var(--shadow-sm)}.welcome-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.welcome-btn:active{transform:translateY(0)}.welcome-hint{margin-top:16px;font-size:12px;color:var(--text-placeholder)}#top-nav{position:absolute;top:16px;right:16px;z-index:600}.nav-btn{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--toolbar-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);color:var(--text-primary);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:all .2s}.nav-btn:hover{background:var(--bg-card);box-shadow:var(--shadow-md)}#auth-modal{position:fixed;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;z-index:1000;background:#faf7f299;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);animation:fadeIn .3s ease-out}#auth-modal.hidden{display:none}.auth-card{position:relative;background:var(--bg-card);border:1px solid var(--border-light);border-radius:var(--radius-lg);padding:32px 40px;max-width:380px;width:90%;text-align:center;box-shadow:var(--shadow-lg)}.auth-close-btn{position:absolute;top:12px;right:16px;background:none;border:none;font-size:24px;color:var(--text-secondary);cursor:pointer;transition:color .15s}.auth-close-btn:hover{color:var(--text-primary)}.auth-card h2{font-size:22px;color:var(--text-primary);margin-bottom:6px}.auth-card p{color:var(--text-secondary);font-size:14px;margin-bottom:24px}#auth-form{display:flex;flex-direction:column;gap:12px}#auth-form input{padding:12px 14px;border:1px solid var(--border);border-radius:var(--radius-sm);font-family:var(--font);font-size:14px;outline:none;background:var(--bg-primary);transition:border-color .2s}#auth-form input:focus{border-color:var(--text-secondary)}.auth-actions{display:flex;flex-direction:column;gap:8px;margin-top:8px}.auth-btn{padding:12px;background:var(--text-primary);color:var(--bg-primary);border:none;border-radius:var(--radius-pill);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:transform .2s,box-shadow .2s}.auth-btn:hover{transform:translateY(-1px);box-shadow:var(--shadow-sm)}.auth-btn-secondary{padding:12px;background:transparent;color:var(--text-primary);border:1px solid var(--border);border-radius:var(--radius-pill);font-family:var(--font);font-size:14px;font-weight:700;cursor:pointer;transition:background .2s}.auth-btn-secondary:hover{background:var(--bg-secondary)}#toast{position:fixed;top:20px;left:50%;transform:translate(-50%);padding:10px 22px;background:var(--text-primary);color:var(--bg-primary);font-family:var(--font);font-size:13px;font-weight:600;border-radius:var(--radius-pill);box-shadow:var(--shadow-md);z-index:2000;animation:toastIn .3s ease-out}#toast.hidden{display:none}@keyframes toastIn{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.hidden{display:none!important}@media (max-width: 768px){#toolbar{bottom:12px;left:8px;right:8px;transform:none}@keyframes toolbarEnter{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}.toolbar-inner{width:100%;justify-content:center;padding:6px 8px;gap:2px}.toolbar-btn{padding:8px 10px;font-size:10px}.toolbar-btn span{display:none}.toolbar-btn svg{width:22px;height:22px}.toolbar-divider{height:24px;margin:0 2px}#menu-dropdown{bottom:70px;left:12px;right:12px}.welcome-card{padding:28px 24px}.welcome-card h1{font-size:20px}.welcome-tips{gap:8px}.tip{font-size:12px;padding:8px 12px}#card-actions{transform:scale(.9);transform-origin:center top}.card-note{min-width:150px;max-width:300px}.card-image-type{max-width:280px}}@media (max-width: 400px){.toolbar-btn{padding:6px 8px}}::selection{background:var(--color-amber);color:var(--text-primary)}:focus-visible{outline:2px solid var(--text-secondary);outline-offset:2px}#board-selector{position:absolute;top:16px;left:16px;z-index:600}#btn-current-board{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--toolbar-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--toolbar-border);border-radius:var(--radius-pill);box-shadow:var(--shadow-sm);color:var(--text-primary);font-family:var(--font);font-size:15px;font-weight:700;cursor:pointer;transition:all .2s}#btn-current-board:hover{background:var(--bg-card);box-shadow:var(--shadow-md)}#boards-dropdown{position:absolute;top:calc(100% + 8px);left:0;width:240px;background:var(--toolbar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--toolbar-border);border-radius:var(--radius-md);box-shadow:var(--shadow-lg);padding:6px;animation:menuAppear .2s ease-out}#boards-dropdown.hidden{display:none}.boards-list{max-height:200px;overflow-y:auto}.boards-list::-webkit-scrollbar{width:4px}.boards-list::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}.board-item{display:block;width:100%;padding:10px 12px;text-align:left;background:none;border:none;font-family:var(--font);font-size:14px;font-weight:500;color:var(--text-primary);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board-item:hover{background:var(--bg-secondary)}.board-item.active{background:var(--bg-secondary);font-weight:700;color:var(--text-primary)}.boards-divider{height:1px;background:var(--border-light);margin:6px 8px}.board-action-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;text-align:left;background:none;border:none;font-family:var(--font);font-size:13px;font-weight:600;color:var(--text-secondary);border-radius:var(--radius-sm);cursor:pointer;transition:background .15s,color .15s}.board-action-btn:hover{background:var(--bg-secondary);color:var(--text-primary)}.board-action-danger{color:#c44}.board-action-danger:hover{background:#dc646414;color:#c44}.card-content::-webkit-scrollbar{width:4px}.card-content::-webkit-scrollbar-track{background:transparent}.card-content::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}