:root{--color-neutral-0: #ffffff;--color-neutral-50: #f8fafc;--color-neutral-100: #f1f5f9;--color-neutral-200: #e2e8f0;--color-neutral-300: #cbd5e1;--color-neutral-400: #94a3b8;--color-neutral-500: #64748b;--color-neutral-600: #475569;--color-neutral-700: #334155;--color-neutral-800: #1e293b;--color-neutral-900: #0f172a;--color-neutral-950: #020617;--color-dark-bg: #1a1a1a;--color-dark-surface: #1d1d1d;--color-dark-dot: #333333;--color-dark-glass: rgba(255, 255, 255, .05);--color-light-bg: #f0f0f0;--color-light-surface: #ffffff;--color-light-dot: #cbd5e1;--color-light-glass: rgba(0, 0, 0, .05);--color-accent-blue: #3b82f6;--color-accent-blue-hover: #2563eb;--color-danger: #ef4444;--color-pastel-red: #ffadad;--color-pastel-orange: #ffd6a5;--color-pastel-yellow: #fdffb6;--color-pastel-green: #caffbf;--color-pastel-cyan: #9bf6ff;--color-pastel-blue: #a0c4ff;--color-pastel-purple: #bdb2ff;--color-pastel-pink: #ffc6ff;--color-pastel-white: #fffffc;--color-note-dark-red: #7f1d1d;--color-note-dark-orange: #7c2d12;--color-note-dark-yellow: #713f12;--color-note-dark-green: #14532d;--color-note-dark-cyan: #164e63;--color-note-dark-blue: #1e3a8a;--color-note-dark-purple: #581c87;--color-note-dark-pink: #831843;--color-note-dark-white: #262626;--color-theme-red-bg: #450a0a;--color-theme-red-surface: #7f1d1d;--color-theme-green-bg: #052e16;--color-theme-green-surface: #14532d;--color-theme-cyan-bg: #083344;--color-theme-cyan-surface: #164e63;--color-theme-yellow-bg: #422006;--color-theme-yellow-surface: #713f12;--color-high-contrast-white: #ffffff;--color-high-contrast-text: #000000}:root{--sys-bg-canvas: #090b11;--sys-bg-surface: #111827;--sys-bg-glass: #1f2937;--sys-border-dim: transparent;--sys-border-highlight: transparent;--sys-dot-color: transparent;--sys-text-primary: #f3f4f6;--sys-text-secondary: #9ca3af;--sys-accent-primary: #15b3ff;--sys-accent-on-primary: #ffffff;--sys-shadow-glass: 0 10px 30px rgba(0, 0, 0, .3);--sys-control-bg: rgba(255, 255, 255, .08);--sys-control-bg-hover: rgba(255, 255, 255, .15);--sys-top-bar-bg: linear-gradient(to bottom, rgba(17, 24, 39, .2) 0%, rgba(17, 24, 39, 0) 100%)}[data-theme=light]{--sys-bg-canvas: #d1d5db;--sys-bg-surface: #e5e7eb;--sys-bg-glass: #f9fafb;--sys-border-dim: transparent;--sys-border-highlight: transparent;--sys-dot-color: transparent;--sys-text-primary: #111827;--sys-text-secondary: #4b5563;--sys-accent-primary: #15b3ff;--sys-accent-on-primary: #ffffff;--sys-shadow-glass: 0 10px 30px rgba(0, 0, 0, .08);--sys-control-bg: rgba(0, 0, 0, .08);--sys-control-bg-hover: rgba(0, 0, 0, .15);--sys-top-bar-bg: linear-gradient(to bottom, rgba(255, 255, 255, .2) 0%, rgba(255, 255, 255, 0) 100%)}:root{--palette-red: var(--color-note-dark-red);--palette-orange: var(--color-note-dark-orange);--palette-yellow: var(--color-note-dark-yellow);--palette-green: var(--color-note-dark-green);--palette-cyan: var(--color-note-dark-cyan);--palette-blue: var(--color-note-dark-blue);--palette-purple: var(--color-note-dark-purple);--palette-pink: var(--color-note-dark-pink);--palette-white: var(--color-note-dark-white)}[data-theme=light]{--palette-red: var(--color-pastel-red);--palette-orange: var(--color-pastel-orange);--palette-yellow: var(--color-pastel-yellow);--palette-green: var(--color-pastel-green);--palette-cyan: var(--color-pastel-cyan);--palette-blue: var(--color-pastel-blue);--palette-purple: var(--color-pastel-purple);--palette-pink: var(--color-pastel-pink);--palette-white: var(--color-pastel-white)}body{margin:0;font-family:Helvetica,Arial,sans-serif;background-color:var(--sys-bg-canvas);color:var(--sys-text-primary);transition:background-color .3s,color .3s}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--sys-border-highlight);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--sys-accent-primary)}:root{--font-family: "Helvetica", "Arial", sans-serif;--bg-color: var(--sys-bg-canvas);--dot-color: var(--sys-dot-color);--glass-bg: var(--sys-bg-glass);--glass-border: var(--sys-border-highlight);--glass-shadow: var(--sys-shadow-glass);--accent-color: var(--sys-accent-primary);--on-accent-color: var(--sys-accent-on-primary);--text-color: var(--sys-text-primary)}body{margin:0;font-family:var(--font-family);background-color:var(--bg-color);color:var(--text-color);overflow:hidden;transition:background-color .4s ease,color .4s ease}#canvas-container{position:absolute;top:0;left:0;width:100vw;height:100vh;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}#infinite-canvas{position:absolute;transform-origin:0 0;width:100%;height:100%;will-change:transform;overflow:visible;pointer-events:auto}.element{position:absolute;background:var(--sys-bg-glass);border:none;border-radius:32px;box-shadow:var(--glass-shadow);padding:16px;min-width:50px;min-height:50px;cursor:grab;-webkit-user-select:none;user-select:none;transition:box-shadow .25s ease,border-color .25s ease,transform .05s ease}.element:hover{box-shadow:var(--glass-shadow),0 8px 25px #00000026}@keyframes elementBirth{0%{opacity:0;transform:var(--el-transform) scale(.85)}60%{opacity:1;transform:var(--el-transform) scale(1.03)}to{opacity:1;transform:var(--el-transform) scale(1)}}.element.animating-in{animation:elementBirth .3s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes elementDeath{0%{opacity:1;transform:var(--el-transform) scale(1)}to{opacity:0;transform:var(--el-transform) scale(.8)}}.element.animating-out{animation:elementDeath .2s ease-out forwards;pointer-events:none}.element.selected{border:none;box-shadow:0 0 0 3px #15b3ff73,var(--sys-shadow-glass)}.element .content{color:var(--sys-text-primary);outline:none;width:100%;height:100%;box-sizing:border-box}.element[data-type=note]{color:var(--text-color);display:flex;flex-direction:column;overflow:visible!important}.element[data-type=note] .content{color:inherit;display:flex;flex-direction:column;height:100%;width:100%;box-sizing:border-box}.element[data-type=note] .content *{color:inherit!important;font-family:inherit}.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--sys-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:12px;padding:12px;box-shadow:0 10px 25px #0000004d;z-index:3000;min-width:max-content}.theme-menu.show{display:block!important;animation:fadeIn .2s ease-out}.theme-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.theme-swatch{width:32px;height:32px;border-radius:50%;cursor:pointer;border:1px solid rgba(255,255,255,.1);transition:transform .2s,box-shadow .2s;padding:0}.theme-swatch:hover{transform:scale(1.1);box-shadow:0 0 0 2px var(--accent-color);z-index:1}.theme-swatch.active{box-shadow:0 0 0 2px var(--accent-color),0 0 0 4px #0003;z-index:2}.zoom-far .element[data-type=note] .note-body{display:none}.zoom-far .element[data-type=note]{justify-content:center;align-items:center;overflow:hidden}.zoom-far .element[data-type=note] .note-header{border-bottom:none;margin:0;padding:10px;text-align:center;line-height:1.1;white-space:normal;word-break:break-word;width:100%;height:100%;display:flex;align-items:center;justify-content:center;overflow:hidden}.element[data-type=image]{padding:0;overflow:hidden;background:transparent;border:none}.element[data-type=image] img{display:block;width:100%;height:100%;object-fit:cover;border-radius:12px}#ui-layer{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}.top-bar{pointer-events:auto;padding:1.25rem 2rem;display:flex;justify-content:space-between;align-items:center;background:var(--sys-top-bar-bg);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}.top-bar h1{margin:0;font-size:1.2rem;font-weight:600;letter-spacing:-.025em;color:var(--text-color)}.top-bar button{color:var(--text-color);transition:color .2s,background .2s}.zoom-controls{display:flex;align-items:center;gap:8px;background:var(--sys-control-bg);padding:4px 12px;border-radius:99px;border:none;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.zoom-controls button{background:transparent;border:none;color:var(--text-color);width:24px;height:24px;cursor:pointer;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700}.zoom-controls button:hover{background:#ffffff1a}.zoom-controls span{font-size:.85rem;font-variant-numeric:tabular-nums;width:40px;text-align:right;color:var(--text-color);opacity:.8}.zoom-controls input[type=range]{width:100px;accent-color:var(--accent-color);cursor:pointer}@media (max-width: 768px){.zoom-controls{display:none}}.actions button{background:var(--glass-bg);border:1px solid var(--glass-border);color:var(--text-color);padding:8px 16px;border-radius:8px;cursor:pointer;margin-left:8px;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);transition:background .2s}.actions button:hover{background:#fff3}.floating-toolbar{pointer-events:auto;align-self:center;margin-bottom:2rem;background:var(--sys-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:none;border-radius:9999px;padding:8px;display:flex;gap:8px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}.tool-btn{background:transparent;border:none;color:var(--text-color);width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,transform .15s,color .2s}.tool-btn:hover{background:#ffffff1a}.note-header{font-weight:800;font-size:1.2rem;margin:0 0 10px;padding-bottom:6px;border-bottom:2px solid rgba(0,0,0,.05);outline:none;line-height:1.2}.note-body{font-size:1rem;outline:none;min-height:40px;line-height:1.5;white-space:pre-wrap}[contentEditable=true]:focus{outline:none}[contentEditable=true]:empty:before{content:attr(placeholder);pointer-events:none;display:block;color:var(--text-color);opacity:.45}.element[data-type=text] [contentEditable=true]:empty:before{color:var(--text-color);opacity:.45}.resize-handle{position:absolute;bottom:-6px;right:-6px;width:16px;height:16px;background:var(--accent-color);border-radius:50%;cursor:se-resize;z-index:20;opacity:0;transition:opacity .2s,transform .2s;box-shadow:0 2px 4px #0003}.resize-handle:after{content:none;display:none}.element:hover .resize-handle{opacity:1}.resize-handle:hover{transform:scale(1.3)}.element.selected .resize-handle{opacity:1}.conn-handle{position:absolute;width:14px;height:14px;background:var(--accent-color);border-radius:50%;z-index:9999;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s,background .2s;cursor:crosshair;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 4px #0003}.element:hover .conn-handle,.element:focus-within .conn-handle,.element.selected .conn-handle,body.connecting-active .conn-handle{opacity:.8;pointer-events:auto}.conn-top:after{transform:rotate(90deg)}.conn-right:after{transform:rotate(180deg)}.conn-bottom:after{transform:rotate(-90deg)}.conn-left:after{transform:rotate(0)}.conn-handle:hover{background:#b296f4}.element[data-type=group]{background-color:var(--sys-control-bg);border:none;-webkit-backdrop-filter:none;backdrop-filter:none;border-radius:16px;padding:40px 20px 20px;cursor:default;z-index:1}.element[data-type=group]>.content>.note-header{position:absolute;top:-16px;left:10px;font-size:24px;opacity:1;border:none;background:var(--accent-color);color:var(--on-accent-color);cursor:text;width:auto;min-width:100px;padding:4px 12px;border-radius:99px;box-shadow:0 4px 6px #0000001a}.element[data-type=group]:hover{border-color:var(--accent-color);box-shadow:0 0 0 1px var(--accent-color),0 8px 25px #0000001a}#marquee-selector{position:absolute;border:1px solid var(--accent-color);background:#3b82f61a;pointer-events:none;z-index:10000;display:none}.drive-indicator{position:absolute;top:-10px;right:-10px;width:28px;height:28px;background:#fff;color:#0f172a;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000004d;cursor:pointer;z-index:40;transition:transform .2s,background .2s;border:2px solid var(--accent-color)}.drive-indicator:hover{transform:scale(1.1);background:var(--accent-color);color:var(--on-accent-color)}.conn-top{top:0;left:50%;transform:translate(-50%,-50%)}.conn-right{top:50%;right:0;transform:translate(50%,-50%)}.conn-bottom{bottom:0;left:50%;transform:translate(-50%,50%)}.conn-left{top:50%;left:0;transform:translate(-50%,-50%)}.connection-line{fill:none;stroke:var(--accent-color);stroke-width:2.5;marker-end:url(#arrowhead);stroke-dasharray:0;transition:stroke-width .2s,opacity .3s;pointer-events:none;opacity:0}.connection-line.visible{opacity:1}#connections-layer{pointer-events:none;z-index:100}.connection-line.temp{stroke-dasharray:5,5;opacity:.6}.tool-btn.active{background:var(--accent-color);color:var(--on-accent-color);transform:scale(1.05)}.tool-btn:active{transform:scale(.9)}#creation-preview{position:absolute;border:1px dashed var(--accent-color);background:#3b82f61a;pointer-events:none;z-index:1000;display:none}.text-toolbar{position:fixed;pointer-events:auto;background:var(--sys-bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:none;border-radius:9999px;padding:6px;display:flex;gap:6px;box-shadow:0 10px 15px -3px #0000001a;z-index:2000;transform:translate(-50%,-100%) translateY(-10px);transition:opacity .2s,transform .2s}.text-toolbar button,.text-toolbar input[type=color]{background:transparent;border:none;color:var(--text-color);width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}.color-indicator-btn{width:24px!important;height:24px!important;border-radius:50%!important;border:2px solid rgba(255,255,255,.2)!important;transition:transform .2s,border-color .2s;background-color:transparent}.color-indicator-btn:hover{transform:scale(1.1);border-color:var(--accent-color)!important}.text-toolbar button:hover{background:#ffffff1a}.palette-popup{position:absolute;bottom:40px;left:50%;transform:translate(-50%);background:var(--sys-bg-surface);border:1px solid var(--glass-border);border-radius:12px;padding:8px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;box-shadow:0 4px 12px #0000004d;z-index:2001;width:max-content}.color-swatch{width:24px;height:24px;border-radius:50%;cursor:pointer;border:2px solid transparent;transition:transform .1s}.color-swatch:hover{transform:scale(1.1);border-color:var(--accent-color)}.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000b3;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease}.modal-overlay.active{opacity:1;pointer-events:all}.modal-content{background:var(--sys-bg-glass);border:none;border-radius:24px;box-shadow:var(--sys-shadow-glass);width:90%;max-width:480px;padding:0;transform:scale(.9) translateY(20px);transition:transform .3s ease}.modal-overlay.active .modal-content{transform:scale(1) translateY(0)}.modal-header{padding:24px 24px 16px;border-bottom:none;display:flex;align-items:center;justify-content:space-between}.modal-header h3{margin:0;font-size:20px;font-weight:600;color:var(--text-color)}.modal-close{background:transparent;border:none;color:var(--text-color);cursor:pointer;padding:8px;border-radius:8px;display:flex;align-items:center;justify-content:center;transition:background .2s}.modal-close:hover{background:#ffffff1a}.modal-body{padding:24px}.modal-body label{display:block;margin-bottom:8px;font-size:14px;font-weight:500;color:var(--text-color)}.modal-body input{width:100%;box-sizing:border-box;padding:12px 16px;background:var(--sys-control-bg);border:none;border-radius:8px;color:var(--text-color);font-size:14px;font-family:var(--font-family);transition:all .2s}.modal-body input:focus{outline:none;border-color:var(--accent-color);background:#ffffff14;box-shadow:0 0 0 3px #3b82f61a}.modal-hint{margin:8px 0 0;font-size:12px;color:var(--sys-text-secondary)}.modal-footer{padding:16px 24px 24px;display:flex;gap:12px;justify-content:flex-end}.modal-btn{padding:10px 20px;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s;border:none;font-family:var(--font-family)}.modal-btn-secondary{background:var(--sys-control-bg);color:var(--text-color)}.modal-btn-secondary:hover{background:#ffffff1a}.modal-btn-primary{background:var(--accent-color);color:var(--on-accent-color)}.modal-btn-primary:hover{background:#2563eb;transform:translateY(-1px);box-shadow:0 4px 12px #3b82f64d}.text-toolbar select{background:transparent;color:var(--text-color);border:none;font-size:.9rem;padding:2px 4px;outline:none}.element[data-type=text]{background:transparent;border:1px solid transparent;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none}.sidebar{position:fixed;top:15px;left:15px;width:280px;height:calc(100vh - 30px);background:var(--sys-bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:none;border-radius:16px;transform:translate(calc(-100% - 30px));transition:transform .4s cubic-bezier(.34,1.56,.64,1);z-index:5000;display:flex;flex-direction:column;box-shadow:var(--sys-shadow-glass)}.sidebar.open{transform:translate(0)}.context-menu{position:fixed;background:var(--sys-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:6px;display:flex;flex-direction:column;min-width:200px;box-shadow:0 10px 25px #0000004d;z-index:9999}body.light-theme .context-menu{background:#fffffff2;border-color:#0000001a;box-shadow:0 10px 25px #0000001a}.context-menu-item{background:transparent;border:none;color:var(--text-color);padding:10px 12px;text-align:left;cursor:pointer;border-radius:8px;font-size:.9rem;display:flex;align-items:center;gap:10px;transition:background .1s}.context-menu-item span{font-size:1.1rem}body.light-theme .context-menu-item:hover{background:#0000000d}@media print{@page{margin:0;size:auto}body{background:#fff!important;overflow:visible!important;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.top-bar,.floating-toolbar,.sidebar,.resize-handle,.conn-handle,.drive-indicator,#marquee-selector,#creation-preview,.text-toolbar,#btn-toggle-sidebar,.context-menu{display:none!important}#canvas-container{position:relative!important;width:100%!important;height:100%!important;background:none!important;overflow:visible!important}#infinite-canvas{transform:none!important;position:absolute!important;left:0!important;top:0!important}.element{box-shadow:none!important;border:1px solid #ccc!important;break-inside:avoid;-webkit-print-color-adjust:exact!important;print-color-adjust:exact!important}.element[data-type=note]{color:#000!important}.note-header{border-bottom:2px solid #ddd!important}}.sidebar-header{padding:20px;display:flex;justify-content:space-between;align-items:center;border-bottom:none}.sidebar-header h2{margin:0;font-size:1.2rem;color:var(--text-color)}.sidebar-header button{background:var(--accent-color);border:none;width:32px;height:32px;border-radius:50%;color:var(--on-accent-color);font-size:1.2rem;cursor:pointer;display:flex;align-items:center;justify-content:center}.board-list{flex:1;overflow-y:auto;padding:10px}.board-item{padding:12px;border-radius:8px;margin-bottom:4px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;transition:background .2s;color:#94a3b8}.board-item:hover{background:#ffffff0d;color:var(--text-color)}.board-item.active{background:#ffffff1a;color:#fff}body.light-theme .board-item.active{background:#0000001a;color:#333}.board-name{flex:1;outline:none}.board-actions{display:flex;gap:4px;opacity:0;transition:opacity .2s}.board-item:hover .board-actions{opacity:1}.board-actions button{background:transparent;border:none;cursor:pointer;font-size:1rem;padding:4px;border-radius:4px}.board-actions button:hover{background:#ffffff1a}.sidebar-footer{padding:20px;border-top:none}.mini-toolbar{display:flex;justify-content:center;gap:12px;width:100%}.mini-toolbar button{background:var(--accent-color);border:none;color:var(--on-accent-color);width:40px;height:40px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s}.mini-toolbar button:hover{opacity:.85;transform:translateY(-2px)}.mini-toolbar button.active{background:#ef4444;color:#fff}.context-menu{position:fixed;background:#1e293bf2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border:1px solid var(--glass-border);border-radius:12px;padding:8px;min-width:180px;box-shadow:0 10px 25px #0000004d;z-index:6000}.context-menu-item{display:block;width:100%;padding:10px 12px;text-align:left;background:transparent;border:none;color:var(--text-color);cursor:pointer;border-radius:6px;font-size:.9rem}.context-menu-item:hover{background:#ffffff1a}.context-menu-item.danger{color:#ef4444}.context-menu-item.danger:hover{background:#ef44441a}@media (max-width: 768px){.top-bar{padding:.8rem 1rem;gap:10px;background:var(--sys-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--sys-border-dim);z-index:100}.top-bar h1{font-size:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.floating-toolbar{margin-bottom:1.5rem;padding:6px;gap:4px;border-radius:9999px;max-width:95vw;overflow-x:auto;justify-content:flex-start;scrollbar-width:none}.floating-toolbar::-webkit-scrollbar{display:none}.tool-btn{width:40px;height:40px;flex-shrink:0}.sidebar{width:250px}.note-header{font-size:1rem}.note-body{font-size:.9rem}.text-toolbar{max-width:90vw;overflow-x:auto;scrollbar-width:none}.text-toolbar::-webkit-scrollbar{display:none}}.mobile-context-menu{position:fixed;background:var(--sys-bg-surface);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--sys-border-dim);border-radius:14px;padding:6px;display:flex;flex-direction:column;min-width:180px;box-shadow:0 10px 30px #0000004d;z-index:9999;animation:mobileMenuFadeIn .15s ease-out;pointer-events:auto}@keyframes mobileMenuFadeIn{0%{opacity:0;transform:scale(.95) translateY(5px)}to{opacity:1;transform:scale(1) translateY(0)}}.mobile-context-menu .context-menu-item{display:flex;align-items:center;gap:10px;width:100%;padding:12px 14px;text-align:left;background:transparent;border:none;color:var(--text-color);cursor:pointer;border-radius:8px;font-size:.95rem;font-family:var(--font-family);transition:background .1s;-webkit-tap-highlight-color:transparent}.mobile-context-menu .context-menu-item:active{background:#ffffff1a}.mobile-context-menu .context-menu-item.danger{color:#ef4444}.mobile-context-menu .context-menu-item.danger:active{background:#ef44441a}#history-panel{position:fixed;top:60px;right:20px;width:280px;max-height:50vh;background:#1c1c1c;background:var(--bg-color);border:1px solid var(--glass-border);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:12px;box-shadow:0 10px 30px #00000080;z-index:6000;display:none;flex-direction:column;overflow:hidden}body.light-theme #history-panel{background:#ffffffe6;box-shadow:0 10px 30px #0000001a}#history-panel.visible{display:flex}.history-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;border-bottom:1px solid var(--glass-border);background:#ffffff0d}.history-header h3{margin:0;font-size:1rem;font-weight:600;color:var(--text-color)}.history-header button{background:transparent;border:none;color:var(--text-color);font-size:1.5rem;line-height:1;cursor:pointer;padding:4px;border-radius:4px}.history-header button:hover{background:#ffffff1a}#history-list{flex:1;overflow-y:auto;padding:8px;display:flex;flex-direction:column;gap:4px}.history-item{padding:8px 12px;border-radius:8px;font-size:.9rem;cursor:pointer;color:var(--text-color);background:transparent;transition:background .2s;-webkit-user-select:none;user-select:none}.history-item:hover{background:#ffffff0d}body.light-theme .history-item:hover{background:#0000000d}.history-item.future{opacity:.5;font-style:italic;text-decoration:line-through}.theme-menu{position:absolute;top:100%;right:0;margin-top:8px;background:var(--sys-bg-surface);border:1px solid var(--sys-border-dim);border-radius:12px;padding:4px;box-shadow:0 4px 12px #0003;display:flex;flex-direction:column;min-width:140px;z-index:2000;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}.theme-menu button{background:transparent;border:none;color:var(--sys-text-primary);padding:8px 12px;text-align:left;cursor:pointer;border-radius:8px;display:flex;align-items:center;gap:8px;font-family:inherit;font-size:.9rem;transition:background .2s}.theme-menu button:hover{background:var(--sys-control-bg-hover)}.theme-menu button.active{background:var(--sys-control-bg);color:var(--sys-accent-primary);font-weight:600}.background-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:450px;height:450px;background-image:url("./Copia de Logo ECF V2 limpio.svg");background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.04;pointer-events:none;z-index:0}.floating-trash-bin{position:fixed;bottom:30px;right:30px;width:64px;height:64px;background:var(--sys-bg-glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:2px solid var(--sys-border-dim);border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--sys-text-secondary);box-shadow:0 8px 32px #0003;z-index:99999;cursor:pointer;transition:transform .3s cubic-bezier(.34,1.56,.64,1),border-color .2s,color .2s,box-shadow .2s}.floating-trash-bin.hovered{transform:scale(1.25);border-color:#ef4444;color:#ef4444;box-shadow:0 0 20px #ef444466}.floating-trash-bin.hovered .trash-lid{transform:translateY(-3px) rotate(-15deg);transform-origin:left center;transition:transform .2s ease}.floating-trash-bin .trash-icon{pointer-events:none}.floating-trash-bin .trash-lid{transition:transform .2s ease}.element.dragging{transform:translate(var(--x),var(--y)) scale(1.08)!important;box-shadow:0 15px 30px #0000004d!important;z-index:10000!important;transition:transform .1s ease,box-shadow .15s ease!important}.element.drag-released{animation:dragBounce .3s cubic-bezier(.25,1,.5,1) forwards}@keyframes dragBounce{0%{transform:translate(var(--target-x),var(--target-y)) scale(1.08)}50%{transform:translate(var(--target-x),var(--target-y)) scale(.95)}to{transform:translate(var(--target-x),var(--target-y)) scale(1)}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#00000080;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;z-index:100000;animation:modalFadeIn .2s ease-out}.modal-container{background:var(--sys-bg-glass);border:none;border-radius:24px;width:90%;max-width:650px;max-height:80vh;box-shadow:var(--sys-shadow-glass);display:flex;flex-direction:column;overflow:hidden;animation:modalScaleIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes modalFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleIn{0%{transform:scale(.9)}to{transform:scale(1)}}.modal-header{padding:16px 20px;border-bottom:1px solid var(--sys-border-dim);display:flex;justify-content:space-between;align-items:center;gap:15px}.modal-header input{background:transparent;border:none;font-size:1.3rem;font-weight:600;color:var(--sys-text-primary);width:100%;outline:none;margin:0;padding:0}.modal-close-btn{background:transparent;border:none;font-size:2rem;color:var(--sys-text-secondary);cursor:pointer;line-height:1;padding:0;display:flex;align-items:center;justify-content:center}.modal-close-btn:hover{color:var(--sys-accent-primary)}.modal-toolbar{padding:10px 20px;background:#0000001a;border-bottom:1px solid var(--sys-border-dim);display:flex;gap:8px;align-items:center}.modal-toolbar button{background:transparent;border:1px solid transparent;color:var(--sys-text-primary);width:32px;height:32px;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}.modal-toolbar button:hover{background:var(--sys-control-bg-hover);border-color:var(--sys-border-dim)}.modal-toolbar button.active{background:var(--sys-control-bg);border-color:var(--sys-accent-primary);color:var(--sys-accent-primary)}#modal-note-body{padding:20px;color:var(--sys-text-primary);font-size:1.1rem;line-height:1.6;outline:none;overflow-y:auto;flex-grow:1;min-height:250px;background:transparent}#modal-note-body[placeholder]:empty:before{content:attr(placeholder);color:var(--sys-text-secondary);opacity:.6}#modal-note-body mark,.element[data-type=note] mark{background:#fef08a;color:#1e293b;border-radius:4px;padding:0 4px}.modal-footer{padding:16px 20px;border-top:1px solid var(--sys-border-dim);display:flex;justify-content:flex-end}.modal-footer .btn-primary{padding:10px 24px;font-size:1rem;font-weight:600}.notes-tree-panel{position:fixed;top:80px;right:20px;width:320px;max-height:calc(100vh - 120px);background:var(--sys-bg-glass);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;box-shadow:var(--sys-shadow-glass);display:flex;flex-direction:column;overflow:hidden;z-index:4500;animation:sidebarSlideIn .3s cubic-bezier(.34,1.56,.64,1)}@keyframes sidebarSlideIn{0%{transform:translate(50px) scale(.95);opacity:0}to{transform:translate(0) scale(1);opacity:1}}.tree-header{padding:16px 20px;border-bottom:1px solid var(--sys-border-dim);display:flex;justify-content:space-between;align-items:center}.tree-header h3{margin:0;font-size:1.1rem;color:var(--sys-text-primary)}.tree-close-btn{background:transparent;border:none;font-size:1.5rem;color:var(--sys-text-secondary);cursor:pointer;padding:0}.tree-close-btn:hover{color:var(--sys-accent-primary)}.tree-content{padding:15px 20px;overflow-y:auto;flex-grow:1}.tree-node{margin-bottom:8px;display:flex;flex-direction:column}.tree-item{padding:8px 12px;border-radius:8px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--sys-text-primary);font-size:.95rem;transition:background .2s,transform .1s}.tree-item:hover{background:var(--sys-control-bg-hover);transform:translate(3px)}.tree-item.active{background:var(--sys-control-bg);color:var(--sys-accent-primary);font-weight:600}.tree-node-children{position:relative;padding-left:16px;margin-left:9px;border-left:1px solid rgba(156,163,175,.3);margin-top:2px;margin-bottom:2px}.tree-node-children>.tree-node{position:relative}.tree-node-children>.tree-node:before{content:"";position:absolute;top:17px;left:-16px;width:10px;height:1px;background:#9ca3af4d}.tree-icon{font-size:1.1rem}