:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media (prefers-color-scheme: light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}:root{--bg: #ffffff;--panel: #f5f5f5;--hover: #eaeaea;--border: #dcdcdc;--text: #1a1a1a;--muted: #6b6b6b}*{box-sizing:border-box}html,body,#root{height:100%;width:100%;overflow-x:hidden}body{margin:0;background:var(--bg);color:var(--text);font:14px/1.4 system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,"Apple Color Emoji","Segoe UI Emoji"}.app{display:flex;height:100vh;overflow:hidden}.app.mobile{flex-direction:column}.app.desktop{flex-direction:row}.mobile-header{display:flex;justify-content:space-between;align-items:center;padding:12px 16px;background:var(--panel);border-bottom:1px solid var(--border);height:56px;flex-shrink:0}.mobile-header-left{display:flex;align-items:center;gap:12px}.mobile-back-btn{background:none;border:none;font-size:20px;color:var(--text);cursor:pointer;padding:4px 8px;border-radius:4px;display:flex;align-items:center;justify-content:center;width:32px;height:32px}.mobile-back-btn:hover{background:var(--hover)}.mobile-title{font-size:18px;font-weight:600;margin:0;color:var(--text)}.mobile-header-right{display:flex;gap:4px}.mobile-nav-btn{background:none;border:1px solid var(--border);font-size:16px;color:var(--muted);cursor:pointer;padding:6px 8px;border-radius:6px;display:flex;align-items:center;justify-content:center;width:36px;height:36px;transition:all .15s}.mobile-nav-btn:hover{background:var(--hover);color:var(--text)}.mobile-nav-btn.active{background:var(--hover);color:var(--text);border-color:var(--text)}.mobile-content{flex:1;overflow:hidden;display:flex;flex-direction:column}@media (max-width: 768px){.navigation-panel{width:100%;height:100%;border-right:none;border-bottom:1px solid var(--border);overflow-x:hidden}.notes-list-panel{width:100%;height:100%;border-right:none;overflow-x:hidden}.main-content{width:100%;height:100%;overflow-x:hidden}.app.mobile .navigation-panel,.app.mobile .notes-list-panel,.app.mobile .main-content{width:100%;flex-shrink:0}.app.mobile{overflow-x:hidden;width:100vw}.mobile-content{overflow-x:hidden;width:100%}.nav-item,.note-list-item{min-height:44px;padding:12px}.nav-item{font-size:16px}.note-list-item{padding:16px 12px;margin-bottom:4px}.note-item-title{font-size:16px}.note-item-preview{font-size:14px;line-height:1.4}.search-input{font-size:16px;padding:12px;border-radius:0}.new-note-button,.create-first-note{min-height:44px;font-size:16px;padding:12px 16px}.editor-toolbar{padding:12px}.toolbar-btn{height:40px;width:40px;min-height:40px;min-width:40px;font-size:16px;padding:0}.note-title-input{font-size:20px;padding:16px 0;word-wrap:break-word;overflow-wrap:break-word}.note-editor-header{padding:16px;overflow-x:hidden}.note-editor-content{padding:0 16px;overflow-x:hidden}.wysiwyg-editor,.markdown-editor{padding:16px;font-size:16px;line-height:1.5;word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap;overflow-x:auto;width:100%;box-sizing:border-box}.note-item-title{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:unset}.note-item-preview{word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:visible;text-overflow:unset;-webkit-line-clamp:unset;-webkit-box-orient:unset;display:block}.nav-label{word-wrap:break-word;overflow-wrap:break-word;white-space:normal}.search-input{width:100%;box-sizing:border-box;overflow-x:hidden}.editor-content,.rich-text-editor{overflow-x:hidden;width:100%}.editor-toolbar{overflow-x:auto;white-space:nowrap}.toolbar-buttons{display:flex;flex-wrap:nowrap;overflow-x:auto}.wysiwyg-editor *{max-width:100%;word-wrap:break-word;overflow-wrap:break-word}.wysiwyg-editor p,.wysiwyg-editor div,.wysiwyg-editor h1,.wysiwyg-editor h2,.wysiwyg-editor h3{word-wrap:break-word;overflow-wrap:break-word;max-width:100%}}.app-loading{display:flex;justify-content:center;align-items:center;height:100vh;font-size:1.2rem}.navigation-panel{background:var(--panel);border-right:1px solid var(--border);padding:8px;display:flex;flex-direction:column;gap:4px;overflow-y:auto;width:260px;flex-shrink:0}.search-section{margin:0;border-bottom:1px solid var(--border);padding:12px 14px 14px}.search-input{padding:6px 8px;background:#fff;border:1px solid var(--border);border-radius:0;width:100%;color:var(--text);font-size:13px}.search-input:focus{outline:none;border-color:#d1d5db}.main-navigation{margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:2px;flex:1}.nav-item{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid transparent;background:none;text-align:left;border-radius:6px;color:var(--muted);cursor:pointer;font-size:13px;transition:all .15s;justify-content:space-between}.nav-item:hover{background:var(--hover);color:var(--text)}.nav-item.active{background:var(--hover);color:var(--text);border:1px solid #d1d5db;box-shadow:0 1px 2px #0000000d}.nav-item:focus{outline:none;border:1px solid #3b82f6;box-shadow:0 1px 3px #3b82f61a}.nav-icon{width:16px;text-align:center;opacity:.8;font-size:14px}.nav-label{flex:1;text-align:left}.nav-count{font-size:11px;background:var(--border);color:var(--muted);padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;font-weight:500}.nav-item-left,.section-toggle-left{display:flex;align-items:center;gap:8px;flex:1}.nav-section{margin-top:0;display:flex;flex-direction:column;flex:1}.section-header{display:flex;justify-content:space-between;align-items:center;padding:2px 0;margin-bottom:2px}.section-toggle{width:100%;display:flex;align-items:center;gap:8px;padding:6px 8px;border:1px solid transparent;background:none;text-align:left;border-radius:6px;color:var(--muted);cursor:pointer;font-size:13px;transition:all .15s;justify-content:space-between}.section-toggle:hover{background:var(--hover);color:var(--text)}.section-toggle:focus{outline:none;border:1px solid #3b82f6;box-shadow:0 1px 3px #3b82f61a}.expand-icon{transition:transform .2s;font-size:16px;color:var(--muted);opacity:.8;width:16px;text-align:center;font-weight:700}.expand-icon.expanded{transform:rotate(90deg)}.add-button{font-size:11px;background:var(--border);color:var(--muted);padding:2px 6px;border-radius:10px;min-width:18px;text-align:center;font-weight:500;border:none;cursor:pointer;display:flex;align-items:center;justify-content:center}.add-button:hover{background:var(--hover)}.section-content{flex:1;overflow-y:auto}.notebook-item-container{position:relative}.notebook-item{font-size:12px;padding-left:32px}.notebook-item-right{display:flex;align-items:center;gap:4px}.notebook-menu-trigger{background:none;border:none;color:var(--muted);cursor:pointer;padding:2px 4px;border-radius:4px;font-size:14px;font-weight:700;width:18px;height:18px;display:flex;align-items:center;justify-content:center;opacity:.8}.notebook-menu-trigger:hover{background:var(--hover);color:var(--text)}.notebook-menu-dropdown{position:absolute;top:24px;right:40px;z-index:2000;background:#fff;opacity:1}.notebook-rename-input{position:absolute;top:0;right:40px;z-index:1000}.rename-input{padding:4px 6px;font-size:12px;border:1px solid #3b82f6;border-radius:4px;background:#fff;color:var(--text);width:120px;outline:none}.delete-confirm-menu{background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;padding:12px;min-width:160px;position:absolute;top:24px;right:40px;z-index:2000;opacity:1}.delete-confirm-message{font-size:12px;color:var(--text);margin-bottom:8px;font-weight:500}.delete-confirm-actions{display:flex;gap:6px;justify-content:flex-end}.delete-confirm-btn,.delete-cancel-btn{padding:4px 8px;font-size:11px;border:1px solid;border-radius:4px;cursor:pointer;transition:all .15s}.delete-confirm-btn{background:#dc3545;color:#fff;border-color:#dc3545}.delete-confirm-btn:hover:not(:disabled){opacity:.9}.delete-confirm-btn:disabled{opacity:.6;cursor:not-allowed}.delete-cancel-btn{background:#fff;color:var(--muted);border-color:var(--border)}.delete-cancel-btn:hover{background:var(--hover);color:var(--text)}.notebook-color{width:8px;height:8px;border-radius:2px;flex-shrink:0}.empty-state{padding:12px 8px;text-align:center;color:var(--muted);font-size:12px}.nav-footer{margin-top:auto;padding-top:12px;border-top:1px solid var(--border)}.sign-out-button{width:100%;padding:6px 8px;background:var(--panel);color:var(--muted);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:12px}.sign-out-button:hover{background:var(--hover)}.notes-list-panel{background:#fff;border-right:1px solid var(--border);display:flex;flex-direction:column;overflow:hidden;width:380px;flex-shrink:0}.list-header{display:flex;flex-direction:column;gap:0;padding:0;border-bottom:none;position:sticky;top:0;background:#fff}.list-header-top{display:flex;align-items:center;justify-content:space-between;padding:14px;margin-bottom:0}.list-title{display:flex;flex-direction:column;gap:2px}.list-title-main{display:flex;align-items:center;gap:8px}.list-title h2{margin:0;font-size:16px;font-weight:700;color:var(--text)}.notes-count{font-size:12px;color:var(--muted)}.list-subtitle{font-size:11px;color:var(--muted);opacity:.8}.new-note-button{padding:6px 12px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px}.new-note-button:hover{background:var(--hover)}.notes-list{flex:1;overflow-y:auto;padding:6px}.empty-list{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;padding:20px;text-align:center}.empty-icon{font-size:2rem;margin-bottom:8px;opacity:.4}.empty-list p{color:var(--muted);margin-bottom:12px;font-size:13px}.create-first-note{padding:8px 16px;background:var(--panel);color:var(--text);border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px}.create-first-note:hover{background:var(--hover)}.note-list-item{border:1px solid transparent;border-radius:10px;padding:10px 12px;cursor:pointer;margin-bottom:2px}.note-list-item:hover{background:var(--hover)}.note-list-item.selected{background:#f9f9f9;border-color:var(--border)}.note-item-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px}.note-item-title{margin:0;font-size:14px;font-weight:600;color:var(--text);flex:1;display:flex;align-items:center;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.favorite-star{font-size:12px}.note-item-date{font-size:12px;color:var(--muted);white-space:nowrap;margin-left:8px}.note-item-preview{margin:0 0 6px;color:var(--muted);font-size:12.5px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;line-height:1.3}.note-item-meta{display:flex;gap:6px;margin-top:6px}.notebook-badge{padding:2px 6px;background:var(--panel);border-radius:4px;font-size:11px;color:var(--muted)}.main-content{background:#fff;display:flex;flex-direction:column;height:100vh;overflow:hidden;flex:1}.note-editor{flex:1;display:flex;flex-direction:column;background:#fff;overflow:hidden}.note-editor-empty{display:flex;justify-content:center;align-items:center;height:100%;color:var(--muted);font-size:16px;opacity:.5}.note-editor-header{padding:18px 20px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px;position:sticky;top:0;background:#fff}.note-title-input{flex:1;font-size:20px;font-weight:700;border:none;background:transparent;padding:4px 0;margin-right:12px;color:var(--text)}.note-title-input:focus{outline:none}.note-title-input[readonly]{cursor:default}.note-title-input.renaming{background:#fff;padding:4px 8px;border-radius:4px;border:1px solid var(--border);cursor:text}.note-editor-actions{display:flex;align-items:center;gap:8px}.notebook-selector{padding:4px 8px;font-size:12px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);cursor:pointer;margin-right:12px}.notebook-selector:focus{outline:none;border-color:var(--muted)}.save-status{font-size:12px;color:var(--muted)}.note-editor-content{flex:1;display:flex;overflow:hidden}.note-content-input{flex:1;width:100%;height:100%;border:none;outline:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;font-size:14px;line-height:1.6;resize:none;box-sizing:border-box;padding:18px 22px 80px;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap}.note-actions-menu{position:relative;display:inline-block}.menu-trigger{padding:6px;background:none;border:none;cursor:pointer;font-size:16px;border-radius:4px;color:var(--muted);width:28px;height:28px;display:flex;align-items:center;justify-content:center}.menu-trigger:hover{background:var(--hover);color:var(--text)}.menu-dropdown{position:absolute;top:100%;right:0;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:180px;z-index:1000;padding:4px 0}.menu-item{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text);transition:background-color .15s}.menu-item:hover{background:var(--hover)}.menu-item.danger{color:#dc3545}.menu-item.danger:hover{background:#fef2f2}.menu-icon{font-size:14px;width:16px;display:flex;justify-content:center}.submenu-trigger{position:relative;padding:0!important}.submenu-button{width:100%;padding:8px 12px;border:none;background:none;text-align:left;cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-size:13px;color:var(--text)}.submenu-button:hover{background:var(--hover)}.submenu-arrow{font-size:10px;opacity:.6}.submenu-dropdown{position:absolute;top:0;left:100%;background:#fff;border:1px solid var(--border);border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:160px;z-index:1001;padding:4px 0;margin-left:4px}.submenu-item{width:100%;padding:6px 12px;border:none;background:none;text-align:left;cursor:pointer;display:flex;align-items:center;gap:6px;font-size:12px;color:var(--text);transition:background-color .15s}.submenu-item:hover{background:var(--hover)}.notebook-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.menu-divider{height:1px;background:var(--border);margin:4px 0}.auth-container{display:flex;justify-content:center;align-items:center;height:100vh;width:100vw;background:var(--panel);position:fixed;top:0;left:0}.auth-form{background:#fff;padding:24px;border-radius:8px;border:1px solid var(--border);width:100%;max-width:360px}.auth-form h1{text-align:center;margin-bottom:20px;color:var(--text);font-size:18px;font-weight:700}.form-group{margin-bottom:16px}.form-group label{display:block;margin-bottom:6px;color:var(--text);font-weight:500;font-size:13px}.form-group input{width:100%;padding:8px 10px;border:1px solid var(--border);border-radius:6px;font-size:14px;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--muted)}.auth-form button{width:100%;padding:10px;background:var(--text);color:#fff;border:none;border-radius:6px;font-size:14px;cursor:pointer;margin-bottom:12px;font-weight:500}.auth-form button:hover:not(:disabled){opacity:.9}.auth-form button:disabled{opacity:.6;cursor:not-allowed}.link-button{background:none;border:none;color:var(--muted);cursor:pointer;text-decoration:underline;font-size:inherit;padding:0;margin:0}.error-message{background:#fef2f2;border:1px solid #fecaca;color:#dc2626;padding:8px 12px;border-radius:6px;margin-bottom:12px;font-size:13px}.modal-overlay{position:fixed;inset:0;background:#0006;display:flex;justify-content:center;align-items:center;z-index:2000}.modal{background:#fff;border-radius:8px;padding:20px;max-width:400px;width:90%;border:1px solid var(--border)}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px}.modal-header h2{margin:0;color:var(--text);font-size:16px;font-weight:700}.close-button{background:none;border:none;font-size:18px;color:var(--muted);cursor:pointer;padding:4px;width:24px;height:24px;display:flex;align-items:center;justify-content:center;border-radius:4px}.close-button:hover{background:var(--hover)}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}.modal-actions button{padding:8px 16px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px;background:#fff;color:var(--text)}.modal-actions button:hover{background:var(--hover)}.modal-actions button[type=submit]{background:var(--text);color:#fff;border-color:var(--text)}.modal-actions button[type=submit]:hover:not(:disabled){opacity:.9}.modal-actions button[type=submit]:disabled{opacity:.6;cursor:not-allowed}.note-title-display{flex:1;font-size:20px;font-weight:700;margin:0;padding:4px 0;color:var(--text);cursor:pointer;border-radius:4px;transition:background-color .15s}.note-title-display:hover{background:var(--hover);padding:4px 8px}.edit-mode-controls{display:flex;align-items:center;gap:8px}.editor-mode-dropdown{padding:4px 8px;font-size:12px;border:1px solid var(--border);border-radius:4px;background:#fff;color:var(--text);cursor:pointer;min-width:80px}.editor-mode-dropdown:focus{outline:none;border-color:#3b82f6}.edit-btn,.save-btn,.cancel-btn{padding:6px 12px;border:1px solid var(--border);border-radius:6px;cursor:pointer;font-size:13px;transition:all .15s}.edit-btn{background:var(--panel);color:var(--text)}.edit-btn:hover{background:var(--hover)}.save-btn{background:#3b82f6;color:#fff;border-color:#3b82f6}.save-btn:hover:not(:disabled){opacity:.9}.save-btn:disabled{cursor:not-allowed}.cancel-btn{background:#fff;color:var(--muted)}.cancel-btn:hover{background:var(--hover);color:var(--text)}.note-content-display{flex:1;padding:18px 22px 80px;overflow-y:auto;overflow-x:hidden}.markdown-editor-container{flex:1;height:100%}.markdown-editor-split{display:flex;height:100%}.markdown-input-panel{flex:1;border-right:1px solid var(--border)}.markdown-text-input{width:100%;height:100%;border:none;outline:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:none;box-sizing:border-box;padding:18px 22px;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;background:#fafafa}.markdown-preview-panel{flex:1;overflow-y:auto;padding:18px 22px;background:#fff}.rich-text-editor{flex:1;display:flex;flex-direction:column;height:100%}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-bottom:1px solid var(--border);background:var(--panel)}.toolbar-buttons{display:flex;align-items:center;gap:4px}.toolbar-btn{padding:0;border:none;background:#fff;color:var(--text);cursor:pointer;border-radius:4px;font-size:13px;transition:background-color .15s;width:28px;height:28px;min-width:28px;min-height:28px;display:flex;align-items:center;justify-content:center}.toolbar-btn:hover{background:var(--hover)}.toolbar-divider{width:1px;height:20px;background:var(--border);margin:0 8px}.toolbar-right{display:flex;align-items:center;gap:8px}.editor-save-controls{display:flex;align-items:center;gap:6px}.editor-save-controls .save-btn,.editor-save-controls .cancel-btn{padding:4px 8px;font-size:12px;border-radius:4px;cursor:pointer;transition:all .15s;border:1px solid var(--border)}.editor-save-controls .save-btn{background:#3b82f6;color:#fff;border-color:#3b82f6}.editor-save-controls .save-btn:hover:not(:disabled){opacity:.9}.editor-save-controls .save-btn:disabled{cursor:not-allowed;background:#9ca3af;border-color:#9ca3af;color:#6b7280}.editor-save-controls .cancel-btn{background:#fff;color:var(--muted)}.editor-save-controls .cancel-btn:hover:not(:disabled){background:var(--hover);color:var(--text)}.editor-save-controls .cancel-btn:disabled{cursor:not-allowed;background:#f3f4f6;color:#9ca3af;border-color:#d1d5db}.editor-content{flex:1;overflow:hidden}.wysiwyg-editor{width:100%;height:100%;padding:18px 22px;border:none;outline:none;font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica Neue,Arial;font-size:14px;line-height:1.6;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap}.wysiwyg-editor:focus{outline:none}.markdown-editor{width:100%;height:100%;border:none;outline:none;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:14px;line-height:1.6;resize:none;box-sizing:border-box;padding:18px 22px;overflow-y:auto;overflow-x:hidden;white-space:pre-wrap;background:#fafafa}.editor-h1,.note-preview h1{font-size:1.5em;font-weight:700;margin:20px 0 10px;color:var(--text)}.editor-h2,.note-preview h2{font-size:1.3em;font-weight:700;margin:18px 0 8px;color:var(--text)}.editor-h3,.note-preview h3{font-size:1.1em;font-weight:700;margin:16px 0 6px;color:var(--text)}.editor-p,.note-preview p{margin:0 0 12px;line-height:1.6}.editor-code,.note-preview code{background:var(--panel);padding:2px 4px;border-radius:3px;font-family:Monaco,Menlo,Ubuntu Mono,monospace;font-size:.9em}.editor-li,.note-preview li{margin:4px 0;line-height:1.5}.note-preview{padding:18px 22px;line-height:1.6;color:var(--text)}