:root{--primary: #3b82f6;--primary-dark: #2563eb;--danger: #ef4444;--danger-dark: #dc2626;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--overlay: rgba(0, 0, 0, .5);--note-color-0: #ffffff;--note-color-1: #fef3c7;--note-color-2: #dcfce7;--note-color-3: #dbeafe;--note-color-4: #fae8ff}.app{max-width:100vw;min-height:100vh;padding:100px 20px 20px;background:var(--gray-50);position:relative}*::-webkit-scrollbar{display:none}*{-ms-overflow-style:none;scrollbar-width:none}.top-bar{position:fixed;top:0;left:0;right:0;height:80px;padding:0 24px;display:flex;align-items:center;justify-content:space-between;background:var(--gray-50);z-index:100}.notes-container{position:relative;width:100%;height:calc(100vh - 100px)}.add-note-button{width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #3b82f64d;transition:all .2s ease}.add-note-button:hover{transform:scale(1.05);background:var(--primary-dark)}.options-container{position:relative}.options-button{width:48px;height:48px;border-radius:50%;background:#fff;border:1px solid var(--gray-200);font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 12px #0000001a;transition:all .2s ease}.options-button:hover{transform:scale(1.05);box-shadow:0 6px 16px #0000001f}.options-menu{position:absolute;top:60px;right:0;background:#fff;border-radius:12px;box-shadow:0 4px 20px #00000026;padding:8px;min-width:160px}.options-menu button{display:block;width:100%;padding:12px 16px;border:none;background:none;text-align:left;font-size:14px;color:var(--gray-700);cursor:pointer;border-radius:6px;transition:all .2s ease}.options-menu button.active{background:var(--primary);color:#fff}.options-menu button:not(.active):hover{background:var(--gray-50);color:var(--gray-900)}.options-menu .view-options{border-bottom:1px solid var(--gray-200);padding-bottom:8px;margin-bottom:8px}.note{position:relative;border-radius:12px;box-shadow:0 4px 20px #0000000d;overflow:hidden;display:flex;flex-direction:column;transition:all .2s ease;min-height:200px;cursor:text}.note.color-0{background:var(--note-color-0)}.note.color-1{background:var(--note-color-1)}.note.color-2{background:var(--note-color-2)}.note.color-3{background:var(--note-color-3)}.note.color-4{background:var(--note-color-4)}.note:hover{box-shadow:0 6px 24px #00000014}.note.pinned{box-shadow:0 8px 24px #0000001f}.note-header{padding:12px 20px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:12px;background-color:#ffffff80;cursor:move}.note-title{font-weight:600;color:var(--gray-900);flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-actions{display:flex;gap:8px;opacity:0;transition:opacity .2s ease}.note-header.show-actions .note-actions{opacity:1}.note-content{padding:20px;flex:1;overflow-y:auto;cursor:text}.note-content pre{position:relative;background:var(--gray-100);border-radius:6px}.copy-code-button{position:absolute;top:8px;right:8px;padding:4px 8px;background:#1f2937;border:none;border-radius:4px;font-size:12px;color:#fff;cursor:pointer;opacity:0;transition:all .2s ease}.code-container{max-height:200px;max-width:100%;overflow:auto;border:0px solid #ccc;border-radius:5px;background-color:#1e1e1e;padding:0;font-size:10px}.note-content pre:hover .copy-code-button{opacity:1}.copy-code-button:hover{background:var(--gray-300);color:var(--gray-900)}.context-menu{position:fixed;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;padding:8px 0;z-index:1000;min-width:160px}.context-menu-item{padding:8px 16px;cursor:pointer;display:flex;align-items:center;gap:8px;color:var(--gray-700);transition:all .2s ease}.context-menu-item:hover{background:var(--gray-50);color:var(--gray-900)}.pin-button{background:none;border:none;cursor:pointer;color:var(--gray-400);padding:4px;border-radius:50%;width:28px;height:28px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.pin-button:hover{background:var(--gray-100);color:var(--gray-600)}.pin-button.pinned{color:var(--primary)}.action-button{background:none;border:none;cursor:pointer;color:var(--gray-400);padding:4px;border-radius:50%;width:32px;height:32px;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.action-button:hover{background:var(--gray-100)}.edit-button:hover{color:var(--primary)}.delete-button:hover{color:var(--danger)}.delete-confirm{position:absolute;top:0;left:0;right:0;bottom:0;background:#fffffff2;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:20px;text-align:center;z-index:10}.delete-confirm p{margin-bottom:16px;color:var(--gray-900);font-weight:500}.delete-confirm-buttons{display:flex;gap:12px}.confirm-button{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.confirm-delete{background:var(--danger);color:#fff}.confirm-delete:hover{background:var(--danger-dark)}.confirm-cancel{background:var(--gray-200);color:var(--gray-700)}.confirm-cancel:hover{background:var(--gray-300)}.modal-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:var(--overlay);display:flex;align-items:center;justify-content:center;z-index:1000;padding:20px}.modal{background:#fff;border-radius:12px;box-shadow:0 8px 32px #0000001a;width:100%;max-width:1200px;max-height:90vh;display:flex;flex-direction:column;animation:modalEnter .3s ease}.modal-header{padding:20px;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;justify-content:space-between;background:var(--gray-50)}.modal-title{font-size:18px;font-weight:600;color:var(--gray-900)}.modal-actions{display:flex;gap:8px}.preview-toggle{opacity:.3;background:none;border:none;color:var(--gray-400);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.preview-toggle:hover,.preview-toggle.active{background:var(--gray-200);color:var(--primary)}.modal-close{background:none;border:none;color:var(--gray-400);cursor:pointer;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all .2s ease}.modal-close:hover{background:var(--gray-200);color:var(--gray-600)}.modal-content{display:flex;gap:20px;padding:20px;height:600px;overflow:hidden}.modal-editor{flex:1;display:flex;flex-direction:column;gap:16px;background:var(--gray-50);padding:20px;border-radius:8px;transition:all .3s ease}.modal-editor.full-width{flex:1}.modal-title-input{width:100%;padding:12px;border:3px solid #3b82f6;border-radius:6px;font-size:16px;color:var(--gray-900);background:#fff;transition:all .2s ease;border-top:0px;border-left:0px;border-right:0px}.modal-title-input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.modal-editor-content{flex:1;padding:16px;border:1px solid var(--gray-200);border-radius:6px;font-family:inherit;font-size:15px;line-height:1.5;color:var(--gray-700);background:#fff;resize:none;scrollbar-width:thin;scrollbar-color:var(--gray-200) white}.modal-editor-content::-webkit-scrollbar{width:8px}.modal-editor-content::-webkit-scrollbar-track{background:#fff}.modal-editor-content::-webkit-scrollbar-thumb{background-color:var(--gray-200);border-radius:4px;border:2px solid white}.modal-editor-content:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px #3b82f61a}.modal-preview{flex:1;display:flex;flex-direction:column;border:1px solid var(--gray-200);border-radius:8px;overflow:hidden;transition:all .3s ease}.modal-preview-content{flex:1;padding:20px;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--gray-200) white}.modal-preview-content::-webkit-scrollbar{width:8px}.modal-preview-content::-webkit-scrollbar-track{background:#fff}.modal-preview-content::-webkit-scrollbar-thumb{background-color:var(--gray-200);border-radius:4px;border:2px solid white}.modal-footer{padding:20px;border-top:1px solid var(--gray-200);display:flex;justify-content:flex-end;gap:12px;background:var(--gray-50)}.modal-button{padding:10px 20px;border:none;border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.modal-button-primary{background:var(--primary);color:#fff}.modal-button-primary:hover{background:var(--primary-dark)}.modal-button-secondary{background:var(--gray-200);color:var(--gray-700)}.modal-button-secondary:hover{background:var(--gray-300)}.react-resizable-handle{position:absolute;width:20px;height:20px;bottom:0;right:0;background:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48Z3JhcGhpY3M+PHBhdGggZD0iTTYgNkgwVjQuMmg0LjJWMEg2djZ6IiBvcGFjaXR5PSIwLjMwMiIvPjwvZ3JhcGhpY3M+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;cursor:se-resize}.notes-container.organized{display:flex;flex-direction:column;gap:40px;max-width:1600px;margin:0 auto;padding:20px;height:auto}.notes-section{display:flex;flex-direction:column;gap:20px}.section-title{font-size:1.25rem;font-weight:600;color:var(--gray-700);margin:0;padding:0 12px}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:24px}.notes-container.organized .note{position:static;width:100%!important;height:auto!important;min-height:200px}.react-resizable{position:relative}.react-resizable-handle{position:absolute;width:20px;height:20px;background-repeat:no-repeat;background-origin:content-box;box-sizing:border-box;background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA2IDYiIHN0eWxlPSJiYWNrZ3JvdW5kLWNvbG9yOiNmZmZmZmYwMCIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSI2cHgiIGhlaWdodD0iNnB4Ij48ZyBvcGFjaXR5PSIwLjMwMiI+PHBhdGggZD0iTSA2IDYgTCAwIDYgTCAwIDQuMiBMIDQgNC4yIEwgNC4yIDQuMiBMIDQuMiAwIEwgNiAwIEwgNiA2IEwgNiA2IFoiIGZpbGw9IiMwMDAwMDAiLz48L2c+PC9zdmc+);background-position:bottom right;padding:0 3px 3px 0}.react-resizable-handle-sw{bottom:0;left:0;cursor:sw-resize;transform:rotate(90deg)}.react-resizable-handle-se{bottom:0;right:0;cursor:se-resize}.react-resizable-handle-nw{top:0;left:0;cursor:nw-resize;transform:rotate(180deg)}.react-resizable-handle-ne{top:0;right:0;cursor:ne-resize;transform:rotate(270deg)}.react-resizable-handle-w,.react-resizable-handle-e{top:50%;margin-top:-10px;cursor:ew-resize}.react-resizable-handle-w{left:0;transform:rotate(135deg)}.react-resizable-handle-e{right:0;transform:rotate(315deg)}.react-resizable-handle-n,.react-resizable-handle-s{left:50%;margin-left:-10px;cursor:ns-resize}.react-resizable-handle-n{top:0;transform:rotate(225deg)}.react-resizable-handle-s{bottom:0;transform:rotate(45deg)}:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;min-width:320px;min-height:100vh;background-color:#fafafa;color:#374151}*{box-sizing:border-box}::placeholder{color:#9ca3af}