:root{--bg-sidebar: #EEE8D5;--bg-list: #FDF6E3;--bg-editor: #FDF6E3;--border-color: #DCCFBF;--text-primary: #002b36;--text-secondary: #586e75;--selection-color: #d6d3c0;--hover-color: rgba(0, 43, 54, .05)}*{box-sizing:border-box}html{height:100%;height:100dvh}body{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif;color:var(--text-primary);background:radial-gradient(circle at 50% -20%,#eee8d5,#fdf6e3);height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none}body.is-electron{background:transparent}#root{height:100%}.app-container{display:flex;height:100%;width:100%}.column-header{height:48px;min-height:48px;display:flex;align-items:center;justify-content:space-between;padding:0 1rem;border-bottom:1px solid var(--border-color);background-color:var(--bg-editor);color:var(--text-secondary);font-size:.85rem;font-weight:500}.sidebar{width:240px;background-color:var(--bg-sidebar);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--border-color);display:flex;flex-direction:column;padding:1rem .5rem;flex-shrink:0}.is-electron .sidebar{background-color:var(--bg-sidebar);backdrop-filter:none;-webkit-backdrop-filter:none}.app-title{font-weight:600;padding:0 .75rem 1rem;color:var(--text-primary);font-size:.9rem;display:flex;align-items:center;gap:.5rem}.sidebar-section{margin-bottom:1.5rem}.section-label>span{padding:0 .75rem .5rem;font-size:.75rem;font-weight:600;color:var(--text-secondary);text-transform:uppercase}.sidebar-item{padding:.4rem .75rem;font-size:.9rem;border-radius:4px;cursor:pointer;color:var(--text-primary);transition:background .2s}.sidebar-item:hover{background-color:var(--hover-color)}.note-list{width:280px;background-color:var(--bg-list);border-right:1px solid var(--border-color);display:flex;flex-direction:column;flex-shrink:0}.note-list-scroll-area{flex:1;overflow-y:auto;min-height:0}.note-item{padding:1rem;border-bottom:1px solid var(--border-color);cursor:pointer;transition:background .2s}.note-item:hover{background-color:var(--hover-color)}.note-item.selected{background-color:var(--selection-color)}.note-item-title{font-weight:500;margin-bottom:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-date{font-size:.8rem;color:var(--text-secondary)}.editor-pane{flex-grow:1;display:flex;flex-direction:column;background-color:var(--bg-editor);padding:2rem 3rem;overflow:hidden}.editor-title-input{font-size:2.25rem;font-weight:700;border:none;outline:none;width:100%;margin-bottom:1.5rem;background:transparent;color:var(--text-primary);resize:none;overflow:hidden;display:block}.editor-title-input::placeholder{color:#d3d3d3}.editor-toolbar{display:flex;padding:.5rem 0;margin-bottom:1rem;border-bottom:1px solid var(--border-color);gap:1rem;flex-wrap:wrap;justify-content:center}.toolbar-group{display:flex;gap:.25rem;padding-right:1rem;border-right:1px solid var(--border-color)}.toolbar-group:last-child{border-right:none}.editor-toolbar button{background:none;border:none;border-radius:4px;cursor:pointer;color:var(--text-secondary);padding:.5rem;display:flex;align-items:center;justify-content:center;transition:all .2s}.editor-toolbar button:hover{background-color:var(--hover-color);color:var(--text-primary)}.editor-toolbar button.is-active{background-color:var(--selection-color);color:var(--text-primary)}.editor-toolbar button:disabled{opacity:.3;cursor:not-allowed}.editor-toolbar.mobile-toolbar{flex-wrap:nowrap;overflow-x:auto;margin-bottom:0;border-bottom:none;justify-content:flex-start;padding:0 .5rem;width:100%;-webkit-overflow-scrolling:touch;gap:.5rem}.editor-toolbar.mobile-toolbar::-webkit-scrollbar{display:none}.editor-toolbar.mobile-toolbar .toolbar-group{border-right:1px solid rgba(0,0,0,.05);padding-right:.5rem;flex-shrink:0}.editor-content{flex-grow:1;display:flex;flex-direction:column;overflow-y:auto}.ProseMirror{outline:none;min-height:100px;font-size:1.1rem;line-height:1.6}.ProseMirror>*:first-child{margin-top:0}.ProseMirror p{margin-top:0;margin-bottom:.75em;line-height:1.5}.ProseMirror p.is-editor-empty:first-child:before{color:#adb5bd;content:attr(data-placeholder);float:left;height:0;pointer-events:none}.ProseMirror table{border-collapse:collapse;margin:0;overflow:hidden;table-layout:fixed;width:100%}.ProseMirror td,.ProseMirror th{border:1px solid var(--border-color);box-sizing:border-box;min-width:1em;padding:6px 8px;position:relative;vertical-align:top}.ProseMirror th{background-color:transparent;font-weight:700;text-align:left}.ProseMirror .selectedCell:after{background:#c8c8ff66;content:"";inset:0;pointer-events:none;position:absolute;z-index:2}.ProseMirror .column-resize-handle{background-color:#adf;bottom:-2px;position:absolute;right:-2px;pointer-events:none;top:0;width:4px}.ProseMirror ul[data-type=taskList]{list-style:none;padding:0}.ProseMirror li.task-item{display:flex!important;flex-direction:row;align-items:flex-start;margin-bottom:.25rem}.ProseMirror li.task-item>label{margin-right:.75rem;user-select:none;flex-shrink:0}.ProseMirror li.task-item>div{flex:1 1 auto;min-width:0}.ProseMirror li.task-item>div>p{margin:0!important;display:block}.ProseMirror li.task-item input[type=checkbox]{cursor:pointer;accent-color:#1c1917;width:1.1em;height:1.1em;border-radius:4px;vertical-align:middle}.ProseMirror li.task-item[data-checked=true]>div{text-decoration:line-through;color:var(--text-secondary);opacity:.8}.ProseMirror pre{background:#0d1117;border-radius:.5rem;color:#c9d1d9;font-family:JetBrains Mono,monospace;padding:.75rem 1rem;margin:1.5rem 0}.ProseMirror pre code{color:inherit;padding:0;background:none;font-size:.8rem}.auth-container{display:flex;align-items:center;justify-content:center;height:100vh;width:100vw;background:linear-gradient(135deg,#fdfbf7,#eef2f3);position:relative;overflow:hidden}.auth-container:before{content:"";position:absolute;top:-10%;right:-5%;width:400px;height:400px;background:radial-gradient(circle,#fde68a,#fde68a00 70%);border-radius:50%;opacity:.5;z-index:0}.auth-container:after{content:"";position:absolute;bottom:-5%;left:-5%;width:300px;height:300px;background:radial-gradient(circle,#bae6fd,#bae6fd00 70%);border-radius:50%;opacity:.5;z-index:0}.auth-card{position:relative;background:#fffc;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:3rem;border-radius:24px;box-shadow:0 10px 40px -10px #0000000d,0 0 0 1px #ffffff80 inset;width:100%;max-width:420px;text-align:center;z-index:1;transition:transform .3s ease}.auth-title{font-size:2rem;font-weight:800;margin-bottom:.5rem;color:#1c1917;letter-spacing:-.03em}.auth-subtitle{color:#78716c;margin-bottom:2.5rem;font-size:1rem;font-weight:500}.auth-error{background-color:#fef2f2;color:#ef4444;padding:1rem;border-radius:12px;margin-bottom:1.5rem;font-size:.9rem;font-weight:500;border:1px solid #fee2e2}.auth-form{margin-bottom:2rem}.auth-form>.form-group input{padding-top:.75rem;padding-bottom:.75rem}.form-group{margin-bottom:1.25rem;text-align:left}.form-group label{display:block;font-size:.85rem;font-weight:600;margin-bottom:.5rem;color:#44403c;margin-left:.5rem}.form-group input{width:100%;padding:.875rem 1.25rem;background:#fff;border:2px solid #e7e5e4;border-radius:99px;font-size:1rem;outline:none;transition:all .2s cubic-bezier(.4,0,.2,1);color:#1c1917}.form-group input:focus{border-color:#1c1917;background:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0000000d}.btn-primary{width:100%;padding:.875rem;background-color:#1c1917;color:#fff;border:none;border-radius:99px;font-size:1rem;font-weight:600;cursor:pointer;transition:all .2s cubic-bezier(.4,0,.2,1);margin-top:.5rem}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000026;background-color:#000}.btn-primary:active{transform:translateY(0)}.btn-primary:disabled{opacity:.7;cursor:not-allowed;transform:none}.auth-footer{display:flex;flex-direction:column;gap:1.25rem}.btn-link{background:none;border:none;color:#57534e;text-decoration:none;cursor:pointer;font-size:.9rem;font-weight:500;transition:color .2s}.btn-link:hover{color:#1c1917;text-decoration:underline}.divider{height:1px;background-color:#e7e5e4;margin:1.5rem 0;width:100%;border:none}.btn-secondary{background:#fff;border:2px solid #e7e5e4;color:#44403c;padding:.75rem;border-radius:99px;cursor:pointer;font-size:.9rem;font-weight:600;transition:all .2s}.btn-secondary:hover{border-color:#d6d3d1;background-color:#fafaf9;color:#1c1917}.bottom-toolbar{position:fixed;bottom:0;left:0;right:0;height:65px;padding-bottom:20px;padding-bottom:env(safe-area-inset-bottom,20px);background-color:#fdf6e3;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-top:.5px solid rgba(0,0,0,.1);display:flex;align-items:center;justify-content:space-between;padding:0 1rem;z-index:10}.toolbar-btn{background:none;border:none;padding:.5rem;cursor:pointer;color:#57534e;display:flex;align-items:center;gap:.5rem;font-size:1rem;font-weight:500}.toolbar-btn.primary{color:#d1a346}@media (max-width: 768px){.app-container.is-mobile{display:block;position:relative;overflow:hidden;background-color:var(--bg-sidebar)}.sidebar{position:fixed;height:100vh;top:0;left:0;bottom:0;width:85%;max-width:320px;z-index:100;transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1);box-shadow:10px 0 30px #00000026;background-color:var(--bg-sidebar)}.sidebar.mobile-open{transform:translate(0)}.note-list{width:100%;height:100%;border-right:none;padding-bottom:50px;background-color:transparent}.note-item{background-color:var(--bg-list);box-shadow:none}.note-item-title{font-size:17px;font-weight:600;margin-bottom:4px;color:var(--text-primary)}.note-item-date{font-size:15px;color:var(--text-secondary)}.editor-pane{position:fixed;top:0;left:0;width:100%;height:100%;z-index:50;padding-bottom:50px!important;display:none;background-color:var(--bg-editor)}.editor-title-input{font-size:24px;font-weight:700;margin-bottom:.5rem;color:var(--text-primary)}.app-container.is-mobile.show-editor .editor-pane{display:flex}.app-container.is-mobile.show-editor .note-list{display:none}}@media (min-width: 769px) and (max-width: 1024px){.app-container{position:relative}.sidebar{position:absolute;top:0;left:0;bottom:0;z-index:100;height:100%;box-shadow:0 4px 20px #00000026;transform:translate(-100%);transition:transform .3s cubic-bezier(.32,.72,0,1)}.sidebar.mobile-open{transform:translate(0)}}.sidebar-item:hover .tag-delete-btn{opacity:1!important;transition:opacity .2s ease-in-out}.icon-button{background:transparent;border:none;cursor:pointer;padding:4px;display:flex;align-items:center;justify-content:center;color:#37352f;border-radius:4px;transition:background-color .2s}.icon-button:hover{background-color:#0000000d}.dropdown-menu{position:absolute;background:#fff;border:1px solid #e7e5e4;border-radius:8px;box-shadow:0 4px 12px #0000001a;padding:4px;min-width:150px;z-index:100;overflow:hidden}.dropdown-item{padding:8px 12px;font-size:.9rem;color:var(--text-primary);cursor:pointer;border-radius:4px;display:flex;align-items:center;justify-content:space-between;transition:background-color .2s}.dropdown-item:hover{background-color:var(--selection-color);color:var(--text-primary)}.dropdown-item span{flex:1}@media (max-width: 480px){.auth-card{padding:1.5rem;margin:1rem;width:auto;max-width:none;border-radius:20px}.auth-title{font-size:1.75rem}.auth-subtitle{margin-bottom:1.5rem;font-size:.9rem}.auth-form{margin-bottom:1.5rem}.form-group{margin-bottom:1rem}.form-group input{padding:.75rem 1rem}.btn-primary{padding:.75rem}.auth-footer{gap:.75rem}.btn-secondary{padding:.6rem}}.editor-pane-layout{padding:0;position:relative;height:100%;display:flex;flex-direction:column}.header-flex-container{display:flex;gap:.5rem;flex:1;align-items:center}.toolbar-container-mobile{border-bottom:1px solid #e5e5e5;background:var(--bg-editor);z-index:10}.toolbar-container-desktop{background:var(--bg-editor);z-index:10}.editor-scroll-area{padding:0 3rem 2rem;flex-grow:1;display:flex;flex-direction:column;overflow-y:auto;min-height:0}.editor-content-wrapper{max-width:900px;margin:0 auto;width:100%;display:flex;flex-direction:column;flex-grow:1;position:relative}.tags-folder-row{display:flex;flex-wrap:wrap;gap:8px;padding:.25rem 0 .75rem;align-items:center}.mobile-folder-select{display:flex;align-items:center;gap:4px;background:var(--bg-secondary, #f3f4f6);border-radius:12px;padding:4px 10px;font-size:.75rem;color:#4b5563}.tag-chip{background:var(--bg-secondary, #f3f4f6);border-radius:12px;padding:4px 10px;font-size:.75rem;display:flex;align-items:center;gap:4px;color:#4b5563}.tag-remove-btn{border:none;background:none;cursor:pointer;padding:0;display:flex;color:#9ca3af}.tag-input-field{border:none;background:transparent;font-size:.75rem;outline:none;min-width:50px;color:#6b7280}.encryption-locked-overlay{position:absolute;inset:120px 0 0;background:var(--bg-editor, white);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:5;color:#6b7280}.find-bar-overlay{position:absolute;top:60px;right:25px;z-index:100;background-color:#fff;border:1px solid #e5e5e5;border-radius:8px;box-shadow:0 4px 12px #0000001a;display:flex;align-items:center;padding:4px 8px;gap:4px}.share-menu-overlay{position:absolute;right:0;top:100%;margin-top:4px;background:#fff;border:1px solid var(--border-color);border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:100;width:300px;padding:16px}.share-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.share-header h3{margin:0;font-size:.95rem;font-weight:600}.share-close-btn{background:none;border:none;cursor:pointer;padding:0;color:#9ca3af;display:flex}.share-close-btn:hover{color:#6b7280}.share-content{display:flex;flex-direction:column;gap:12px}.share-live-badge{display:flex;align-items:center;gap:8px;font-size:.85rem;color:#059669;background:#ecfdf5;padding:8px;border-radius:6px}.share-link-box{display:flex;gap:8px}.share-input{flex:1;font-size:.8rem;padding:6px 8px;border-radius:4px;border:1px solid var(--border-color);background:#f9fafb;text-overflow:ellipsis;outline:none}.share-copy-btn{background:#fff;border:1px solid var(--border-color);border-radius:4px;padding:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:#4b5563}.share-copy-btn:hover{background-color:#f3f4f6;color:#111827}.share-action-btn{width:100%;padding:8px;border-radius:6px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s}.share-action-btn.publish{background:#1c1917;border:none;color:#fff}.share-action-btn.publish:hover{background:#000}.share-action-btn.unpublish{background:#fff;border:1px solid #ef4444;color:#ef4444}.share-action-btn.unpublish:hover{background:#fef2f2}.share-description{margin:0;font-size:.85rem;color:#6b7280}.more-options-menu{position:absolute;right:0;top:100%;background:#fff;border:1px solid var(--border-color);border-radius:6px;box-shadow:0 4px 6px -1px #0000001a;z-index:50;min-width:140px;padding:4px 0}.menu-item-btn{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;border:none;background:none;cursor:pointer;text-align:left;font-size:.85rem;color:#6b7280}.menu-item-btn:hover{background-color:var(--bg-secondary)}.folder-select-desktop{display:flex;align-items:center;gap:4px;margin-right:8px;color:var(--text-secondary)}.folder-select-input{background:transparent;border:none;color:#6b7280;font-size:.85rem;cursor:pointer;max-width:120px;outline:none}.security-modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(2px);padding:0 24px}.security-modal{background:#fff;padding:24px;border-radius:12px;width:100%;max-width:400px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;animation:modalScale .2s ease-out}@keyframes modalScale{0%{transform:scale(.95);opacity:0}to{transform:scale(1);opacity:1}}.security-modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.security-modal-header h3{margin:0;display:flex;align-items:center;gap:8px;font-size:1.1rem;font-weight:600;color:var(--text-primary)}.security-close-btn{border:none;background:none;cursor:pointer;color:#9ca3af;padding:4px;border-radius:4px;transition:all .2s}.security-close-btn:hover{background:#f3f4f6;color:#4b5563}.security-form{display:flex;flex-direction:column;gap:16px}.security-input{padding:10px 12px;border-radius:6px;border:1px solid var(--border-color);font-size:.95rem;outline:none;width:100%;transition:border-color .2s}.security-input:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb1a}.security-error{color:#ef4444;font-size:.85rem;background:#fef2f2;padding:8px;border-radius:4px;border:1px solid #fee2e2}.security-footer{display:flex;justify-content:flex-end;gap:12px;margin-top:8px}.security-btn{padding:8px 16px;border:none;border-radius:6px;cursor:pointer;font-weight:500;font-size:.9rem;transition:all .2s}.security-btn-secondary{background:#f3f4f6;color:#374151}.security-btn-secondary:hover{background:#e5e7eb}.security-btn-primary{background:#2563eb;color:#fff}.security-btn-primary:hover{background:#1d4ed8}.recovery-key-box{background:#f3f4f6;padding:12px;border-radius:6px;font-family:monospace;font-size:1.1rem;text-align:center;border:1px dashed #ccc;display:flex;align-items:center;justify-content:center;gap:8px;color:#374151}
