.toast-root{position:fixed;bottom:var(--spacing-6);left:50%;transform:translate(-50%);z-index:var(--z-popover);pointer-events:none;.toast-container{display:flex;align-items:center;background-color:var(--neutral-800);border-radius:50px;box-shadow:var(--shadow-4);padding:10px 12px 10px 20px;min-width:280px;max-width:400px;pointer-events:auto;animation:toast-slide-up .2s ease-out;will-change:transform,opacity;.toast-message{flex:1;font:var(--sm);color:var(--neutral-100)}.toast-close{margin-left:var(--spacing-3);cursor:pointer;display:flex;align-items:center;justify-content:center;padding:var(--spacing-1);border-radius:50px;svg.lucide{width:16px;height:16px;line,circle,rect,path{stroke-width:2.5;stroke:var(--neutral-100)}}&:hover{background-color:var(--neutral-100);svg.lucide{line,circle,rect,path{stroke:var(--neutral-900)}}}}}}@keyframes toast-slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:640px){.toast-root{bottom:40px;left:10px;right:10px;transform:none;.toast-container{min-width:auto;max-width:none;width:100%}}}.input-container{margin-top:var(--spacing-6);input,textarea{height:44px;border-radius:4px;border:1px solid var(--neutral-200);background-color:var(--bg-primary);color:var(--text-primary);padding:var(--spacing-2);margin-top:var(--spacing-1);min-width:320px;outline:none;transition:border-color .2s;&:focus{border-color:var(--neutral-600)}&.error{border:1px solid var(--red-600);color:var(--neutral-900);&:focus{border-color:var(--red-700)}}}textarea{width:100%;height:300px;font:var(--sm);font-family:monospace;resize:none;tab-size:4;field-sizing:content}.hint{color:var(--neutral-400);font:var(--sm)}.error{color:var(--red-600);font:var(--sm)}}.form-field-container{margin-top:var(--spacing-6);label{font-weight:600}}.button{display:inline-flex;height:36px;align-items:center;justify-content:space-between;padding:0 8px;border-radius:6px;border:1px solid var(--neutral-100);overflow:hidden;font:var(--sm);font-weight:600;transition-property:background-color,box-shadow;transition-duration:var(--transition-normal);text-decoration:none;box-shadow:var(--shadow-1);color:var(--text-primary);background-color:var(--bg-primary);user-select:none;-webkit-user-select:none;&:hover{background-color:var(--neutral-100);cursor:pointer}svg.lucide{cursor:pointer;width:20px;height:20px;margin:8px 0 8px 8px;transition-property:stroke;transition-duration:var(--transition-normal);&:hover{rect,path{stroke:var(--neutral-900)}}}&:active{box-shadow:none;transform:scale(.98);transition:transform var(--transition-fast) ease-out}&.primary{background-color:var(--neutral-900);color:var(--neutral-50);svg.lucide{line,circle,rect,path{stroke:var(--neutral-50)}}&:hover{background-color:var(--neutral-700);svg.lucide{line,circle,rect,path{stroke:var(--neutral-50)}}}}&.danger{background-color:var(--red-600);color:var(--neutral-50);&:hover{background-color:var(--red-700)}}&[disabled]{opacity:.8;cursor:not-allowed}a{height:34px;line-height:1}}.ghost-button{display:flex;align-items:center;cursor:pointer;padding:var(--spacing-1) 10px;font:var(--sm);font-weight:600;transition:background-color var(--transition-normal);border:none;background:none;border-radius:4px;&:hover{background-color:var(--neutral-100)}&:active{transform:scale(.98);transition:transform var(--transition-fast) ease-out}&[disabled]{opacity:.5;cursor:not-allowed}}@media(prefers-color-scheme:dark){.button{&.danger{color:var(--text-primary)}}}[data-theme=dark]{.button{&.danger{color:var(--text-primary)}}}.button-group{display:flex;gap:var(--spacing-1);&.is-mobile{display:none}.icon-button{padding:var(--spacing-2);border-radius:4px;cursor:pointer;transition:background-color .5s;display:flex;align-items:center;justify-content:center;&:hover{background-color:var(--neutral-100)}svg.lucide{width:20px;height:20px;transition-property:stroke;transition-duration:.5s;line,circle,rect,path{stroke:var(--neutral-500)}&:hover{line,circle,rect,path{stroke:var(--neutral-900)}}}}}@media screen and (max-width:948px){.button-group{&.is-mobile{display:flex}}}.modal-backdrop-container{position:absolute;inset:0;z-index:var(--z-modal);backdrop-filter:blur(2px);background-color:#000c;&.is-centered{display:flex;align-items:center;justify-content:center}}.modal-content-container{background-color:var(--bg-primary);border:1px solid var(--neutral-100);border-radius:4px;box-shadow:var(--shadow-5);animation:modal-slide-down .3s ease-out;will-change:transform,opacity;.modal-title{font-weight:600}.modal-content{padding:var(--spacing-4);.modal-description{font:var(--sm);color:var(--text-secondary);line-height:1.4}}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:var(--spacing-2);padding-left:var(--spacing-4);border-bottom:1px solid var(--neutral-200);.modal-close-button{padding:var(--spacing-2);cursor:pointer;border-radius:4px;transition:background-color var(--transition-normal);&:hover{background-color:var(--neutral-100)}line,circle,rect,path{stroke:var(--text-secondary)}}}.modal-footer-container{display:flex;justify-content:space-between;margin-top:16px;padding:var(--spacing-4);padding-left:var(--spacing-2);background-color:var(--neutral-50);box-shadow:inset var(--shadow-2);&.right-aligned{justify-content:flex-end}.button{margin-left:var(--spacing-2)}}@keyframes modal-slide-down{0%{transform:translateY(-10px);opacity:0}to{transform:translateY(0);opacity:1}}.focus-dialog,.tag-dialog{width:600px;.notes-editor-tags-input{display:inline-block}}.lightbox{max-width:95vw;max-height:95vh;background-color:transparent;border:none;box-shadow:none;animation-duration:.1s;display:flex;flex-direction:column;gap:10px;overflow-y:auto;overflow-x:hidden;.lightbox-image-container{display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;.lightbox-image{max-width:95vw;max-height:calc(95vh - 48px);width:auto;height:auto;object-fit:contain;border-radius:4px;&.zoomable{cursor:zoom-in}}.lightbox-controls{position:absolute;top:16px;right:16px;display:flex;gap:8px;opacity:0;transition:opacity var(--transition-normal);z-index:1;.lightbox-similar-button,.lightbox-close-button{padding:8px;cursor:pointer;border-radius:4px;background-color:#00000080;transition:background-color var(--transition-normal);svg{width:20px;height:20px;line,circle,rect,path{stroke:#fff}}&:hover{background-color:#000000b3}}}&:hover .lightbox-controls{opacity:1}}.lightbox-button-container{min-height:38px;display:flex;align-items:center;justify-content:center;flex-shrink:0;.lightbox-similar-images-button{padding:6px 12px;background-color:var(--neutral-50);color:var(--text-primary);border:none;border-radius:50px;cursor:pointer;font:var(--sm);font-weight:500;animation:lightbox-image-fade-in .3s ease-in;transition:background-color var(--transition-normal);&:hover{background-color:var(--neutral-200)}&:active{transform:scale(.98)}}}.lightbox-similar-images-container{display:flex;flex-direction:column;gap:10px;width:100%;max-height:calc(95vh - 48px);.lightbox-similar-images-header{display:flex;align-items:center;justify-content:space-between;padding:8px;flex-shrink:0;.lightbox-similar-images-back,.lightbox-similar-images-close{padding:8px;cursor:pointer;border-radius:4px;background-color:#00000080;transition:background-color var(--transition-normal);svg{width:20px;height:20px;line,circle,rect,path{stroke:#fff}}&:hover{background-color:#000000b3}}.lightbox-similar-images-title{color:#fff}}.lightbox-similar-images-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;padding:10px;align-content:flex-start;overflow-y:auto;flex:1;.lightbox-similar-image{height:300px;width:100%;object-fit:cover;border-radius:6px;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);&:hover{transform:scale(.95) translateY(-2px);z-index:1}&:active{transform:scale(.9);transition:all .1s ease-out}&.reveal-animate{animation:lightbox-image-pop-in .3s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(var(--reveal-index, 1) * .03s)}}}}&.zoomed{max-width:80vw;max-height:95vh;.lightbox-image-container{align-items:flex-start;justify-content:center;.lightbox-image{width:80vw;max-width:80vw;max-height:none;height:auto;object-fit:contain;&.zoomable{cursor:zoom-out}}}}}@keyframes lightbox-image-fade-in{0%{opacity:0}to{opacity:1}}@keyframes lightbox-image-pop-in{0%{opacity:0;transform:scale(.8)}to{opacity:1;transform:scale(1)}}.tabs{display:flex;.tab{background:none;border:none;padding:4px 10px;margin-right:4px;border-radius:4px;font:var(--sm);color:var(--text-secondary);cursor:pointer;&:hover{color:var(--text-primary);background-color:var(--neutral-100)}&.is-active{color:var(--text-primary);font-weight:600;background-color:var(--neutral-100)}}}.search-modal{width:600px;margin:auto;margin-top:20vh;.search-input-container{display:flex;align-items:center;padding-left:2px;margin:var(--spacing-2);background-color:var(--neutral-100);border-radius:4px;input{border:0;outline:0;width:100%;height:40px;padding-left:10px;color:var(--text-primary);background-color:var(--neutral-100);border-radius:4px}}svg.lucide{padding:var(--spacing-2)}.search-tabs{padding:0 var(--spacing-2);padding-bottom:var(--spacing-2)}.search-results-container{max-height:400px;overflow-y:scroll;&::-webkit-scrollbar{display:none}.search-section-title{font:var(--sm);font-size:12px;color:var(--text-secondary);padding:10px}.search-result-item{display:flex;align-items:center;text-decoration:none;color:inherit;padding:6px;margin:4px;border-radius:4px;cursor:pointer;transition:background-color .5s;&:hover,&.is-selected{background-color:var(--neutral-100)}.search-result-item-content{padding-left:10px;.title{font-weight:600;mark{background:#facc151a;color:var(--yellow-500);border-radius:4px;padding:2px}}.subtitle{font:var(--sm);color:var(--neutral-400);max-width:500px;overflow:hidden;height:20px;text-overflow:ellipsis;white-space:nowrap;mark{background:#facc151a;color:var(--yellow-500);border-radius:4px;padding:2px;font-weight:500}}}}.search-result-images{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;padding:0 10px 10px;img{height:185px;width:100%;margin:0;box-sizing:border-box;object-fit:cover;border-radius:4px;box-shadow:var(--shadow-2);cursor:pointer;transition:opacity .15s;&:hover{opacity:.8}&:active{transform:scale(.98);transition:transform .15s ease-out}}}}}@media screen and (max-width:948px){.search-modal{width:100%;margin-top:0;border-radius:0;.search-results-container{max-height:70vh;.search-result-item{.search-result-item-content{.subtitle{width:300px}}}}}}.settings-modal{width:800px;max-height:600px;overflow:hidden;.settings-content{display:flex;height:500px;.settings-form{margin-bottom:var(--spacing-6)}.button{margin-top:16px;align-self:flex-start}hr{border:1px solid var(--neutral-100);margin:32px 0}}.settings-sidebar{width:200px;background-color:var(--bg-secondary);border-right:1px solid var(--neutral-100);padding:var(--spacing-2) 0;.settings-tab{display:flex;align-items:center;cursor:pointer;font-size:14px;margin:2px var(--spacing-2);border-radius:4px;text-decoration:none;color:var(--neutral-900);transition-property:background-color;transition-duration:.5s;&:hover,&.is-active{background-color:var(--neutral-200)}svg.lucide{padding:var(--spacing-2)}}}.settings-main{flex:1;padding:var(--spacing-3) 24px;overflow-y:auto;.settings-tab-content{h3{margin-bottom:8px}p{margin-bottom:12px;color:var(--text-secondary);font:var(--sm)}.code-block{background-color:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:6px;padding:var(--spacing-3);font-family:var(--font-family-code);font-size:12px;line-height:1.4;color:var(--neutral-600);margin:12px 0;overflow-x:auto;white-space:pre}.file-upload-container{margin-bottom:16px;input[type=file]{display:none}.file-upload-label{display:flex;align-items:center;gap:var(--spacing-2);padding:12px 16px;border:1px dashed var(--neutral-300);border-radius:4px;color:var(--neutral-400);cursor:pointer;transition-property:color,background-color;transition-duration:.5s;font:var(--sm);min-height:100px;justify-content:center;&:hover{background-color:var(--neutral-50);border-color:var(--neutral-400)}&.disabled{cursor:not-allowed}svg{width:16px;height:16px}}.upload-progress{margin-top:16px;.upload-progress-text{font:var(--sm);color:var(--text-secondary);margin-bottom:8px}.upload-progress-bar{width:100%;height:8px;background-color:var(--neutral-200);box-shadow:inset var(--shadow-4);border-radius:4px;overflow:hidden;.upload-progress-fill{height:100%;border-radius:4px;background-color:var(--neutral-700);transition:width .3s ease}}}.upload-summary{margin-top:16px;h4{margin-bottom:4px}.upload-summary-message{margin-bottom:16px;a{display:inline;font:var(--sm);color:var(--text-primary);text-decoration:none}}.upload-summary-section{h5{margin-bottom:8px;display:flex;align-items:center;gap:4px;svg{width:16px;height:16px;line,circle,rect,path{stroke-width:2.5}}}&.uploaded{h5{color:var(--green-500);svg{line,circle,rect,path{stroke:var(--green-500)}}}}&.skipped{h5{color:var(--yellow-500);svg{line,circle,rect,path{stroke:var(--yellow-500)}}}}&.errored{h5{color:var(--red-500);svg{line,circle,rect,path{stroke:var(--red-500)}}}}.file-list{padding:0;margin-bottom:8px;color:var(--text-secondary);font:var(--code);.file-item{list-style:none}}}}}.theme-selector{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-top:16px;.theme-option{cursor:pointer;border:1px solid var(--neutral-200);border-radius:8px;padding:var(--spacing-3);transition:all .2s ease;&:hover{border-color:var(--neutral-300)}&:active{transform:scale(.98);transition:transform .15s ease-out}&.is-selected{border-color:var(--neutral-600)}.theme-preview{position:relative;width:100%;height:auto;overflow:hidden;margin-bottom:16px;background:var(--bg-primary);svg{width:100%;height:auto;display:block}.system-theme-preview{display:flex;position:relative;.system-theme-half{flex:1;overflow:hidden;&:first-child{clip-path:polygon(0 0,100% 0,0 100%)}&:last-child{margin-left:-100%;clip-path:polygon(100% 0,100% 0,100% 100%,0 100%)}}}}.theme-info{.theme-name{font:var(--sm);font-weight:600;color:var(--text-primary)}}}}.export-section{margin:16px 0;h4{margin:12px 0;color:var(--text-primary)}.export-info-list{margin:0;padding-left:20px;color:var(--text-secondary);font:var(--sm);li{margin-bottom:6px;strong{color:var(--text-primary)}code{background-color:var(--neutral-100);padding:2px 4px;border-radius:3px;font-family:var(--font-family-code);font-size:12px;color:var(--neutral-700)}}}}.mcp-token-creator{margin-top:16px;margin-bottom:48px;.input-container{margin-bottom:var(--spacing-1)}}.mcp-token-display{margin-top:16px;margin-bottom:48px;.mcp-token-display-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-3)}.mcp-token-value{display:flex;align-items:center;gap:var(--spacing-3);margin-bottom:var(--spacing-3);code{flex:1;padding:var(--spacing-3);background-color:var(--neutral-100);border:1px solid var(--neutral-200);border-radius:4px;font-family:var(--font-family-code);font-size:14px;word-break:break-all;border-style:dashed}}}.mcp-tokens-section{h4{margin-bottom:var(--spacing-3);color:var(--text-primary)}.mcp-no-tokens{font-size:14px;color:var(--neutral-400);text-align:center;padding:32px;background-color:var(--bg-secondary);border-radius:8px}.mcp-tokens-list{.mcp-token-item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;margin-bottom:8px;border-bottom:1px solid var(--bg-tertiary);&:last-of-type{border-bottom:0}.mcp-token-info{flex:1;.mcp-token-name{font-weight:500;margin-bottom:4px}.mcp-token-date{font-size:12px;color:var(--neutral-400)}}}}}}}}.sidebar-backdrop-container{display:none}.sidebar-container{min-width:var(--sidebar-width);padding:14px 0;background-color:var(--bg-secondary);height:100%;display:flex;flex-direction:column;.sidebar-fixed{flex-shrink:0}.sidebar-scrollable{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;&::-webkit-scrollbar{display:none}}.sidebar-focus-switcher{margin:0 8px;padding-bottom:8px;.dropdown-button{width:100%}}.sidebar-button{display:flex;align-items:center;cursor:pointer;padding:0 8px;text-decoration:none;color:var(--neutral-500);transition:color var(--transition-normal),stroke var(--transition-normal);&:hover,&.is-active{color:var(--neutral-900);svg.lucide{circle,rect,path,line{stroke:var(--neutral-900)}}}&:active{transform:scale(.98);transition:transform var(--transition-fast) ease-out}svg.lucide{padding:8px}}.sidebar-section{cursor:pointer;padding:0 8px;margin-top:var(--spacing-6);margin-left:8px;.sidebar-section-title{font:var(--sm);color:var(--neutral-500);font-size:12px;font-weight:600;margin-bottom:var(--spacing-1)}a.sidebar-tag-link{display:flex;justify-content:space-between;padding:var(--spacing-1) 0;cursor:pointer;text-decoration:none;font-size:14px;font-weight:500;color:var(--neutral-400);transition:color var(--transition-normal);&:hover,&.is-active{color:var(--neutral-600)}&:active{transform:scale(.98);transition:transform var(--transition-fast) ease-out}&:hover{svg.lucide{display:block}}svg.lucide{display:none;width:20px;height:20px;padding:var(--spacing-1);transition:background-color var(--transition-normal);line,circle,rect,path{stroke:var(--neutral-600)}&:hover{background-color:var(--neutral-200);border-radius:4px}&:active{transform:scale(.97);transition:transform var(--transition-fast) ease-out}}}}}@media screen and (max-width:948px){.sidebar-backdrop-container{background-color:none;transition:background-color .3s ease-in-out;&.is-open{display:block;position:absolute;inset:0;z-index:var(--z-modal);backdrop-filter:blur(2px);background-color:#000c}}.sidebar-container{display:flex;opacity:0;width:0;z-index:var(--z-popover);transform:translate(-100%);transition:transform .3s ease-in-out,opacity .1s ease-in-out;&.is-open{width:80vw;transform:translate(0);opacity:1;.sidebar-focus-switcher{.dropdown-button{height:48px}.dropdown-option{height:48px;&:hover,&.is-selected{svg.lucide{display:none}}}}.sidebar-button{padding:2px 8px;&.new,&.search,&.settings,&.canvas,&.templates{display:none}}.sidebar-section{margin-bottom:calc(var(--mobile-navbar-height) + var(--safe-area-bottom));a.sidebar-tag-link{font:var(--p1);padding:8px 0;&:hover{svg.lucide{display:none}}}}}}}.sidepanel-container{width:0;overflow:hidden;border-left:1px solid var(--neutral-100);display:flex;flex-direction:column;transition:width var(--transition-fast) ease;.sidepanel-toolbar,.sidepanel-content{opacity:0;transition:opacity var(--transition-fast) ease}&.is-open{width:var(--sidepanel-width);.sidepanel-toolbar,.sidepanel-content{opacity:1;transition-delay:var(--transition-fast)}}.sidepanel-toolbar{display:flex;justify-content:flex-end;padding-top:18px;padding-bottom:18px;padding-right:var(--spacing-4);position:sticky;top:0;background:var(--bg-primary);flex-shrink:0;svg.lucide{cursor:pointer;width:20px;height:20px;margin-right:0;transition-property:stroke;transition-duration:var(--transition-normal);&:hover{rect,path{stroke:var(--neutral-900)}}}}.sidepanel-content{overflow-y:auto;flex:1;padding:0 var(--spacing-6) var(--spacing-6);&::-webkit-scrollbar{display:none}}}@media screen and (max-width:948px){.sidepanel-container{display:none}}.note-clear-trash-modal{width:400px}.notes-list-toolbar{display:flex;justify-content:space-between;padding:14px 0 8px;margin:0 12px 0 4px;background:var(--bg-primary);z-index:var(--z-base);position:sticky;top:0;.button-group{display:flex}.is-mobile,.notes-list-toolbar-name{display:none}svg.lucide{cursor:pointer;width:20px;height:20px;margin:var(--spacing-2);margin-right:0;margin-left:10px;transition-property:stroke;transition-duration:.5s;&:hover{rect,path{stroke:var(--neutral-900)}}}}@media screen and (max-width:948px){.notes-list-toolbar{.is-mobile{display:flex}.notes-list-toolbar-name{display:block;flex:1;font-weight:600;line-height:20px;padding:var(--spacing-2);padding-left:var(--spacing-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}}}.spinner{height:24px;width:24px;border:2px solid var(--neutral-300);border-top-color:var(--neutral-500);border-radius:20px;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.spinner-container{display:flex;margin:auto}.notes-gallery{margin-left:var(--spacing-3);.image-gallery{position:relative;width:100%;box-sizing:border-box;.image-gallery-item{position:absolute;margin:0;box-sizing:border-box;object-fit:cover;border-radius:4px;transition-property:box-shadow,opacity;transition-duration:.5s;box-shadow:var(--shadow-2);opacity:0;cursor:pointer;&.loaded{opacity:1}&:hover{box-shadow:var(--shadow-4)}&:active{transform:scale(.98);transition:transform .15s ease-out}}.image-gallery-empty-text{font:var(--sm);padding:16px;color:var(--neutral-400);display:flex;justify-content:center;align-items:center;margin-top:64px}}}.toc-sidebar{position:fixed;left:8px;top:50%;transform:translateY(-50%);cursor:pointer;z-index:1;.toc-bars{display:flex;flex-direction:column;gap:2px;padding:16px 8px;.toc-bar{height:2px;background:var(--neutral-300);transition:all .15s ease;margin-bottom:4px}.toc-bar-level-1{width:10px}.toc-bar-level-2{width:8px}.toc-bar-level-3{width:6px}.is-visible{background:var(--neutral-400)}&:hover{.toc-bar{background:var(--neutral-200)}}}}.toc-popover{position:fixed;left:30px;top:50%;transform:translateY(-50%);z-index:1;animation:toc-slide-right .3s ease-out;.toc-popover-content{background:var(--neutral-800);border-radius:4px;box-shadow:var(--shadow-4);padding:4px;min-width:100px;max-width:280px;max-height:400px;overflow-y:auto;.toc-items{display:flex;flex-direction:column;gap:4px;.toc-item{padding:4px;cursor:pointer;border-radius:4px;font:var(--sm);color:var(--neutral-200);transition:all .1s ease;font-size:12px;&:hover{background-color:var(--neutral-700);color:var(--neutral-100)}&.is-visible{font-weight:600}}}}}@keyframes toc-slide-right{0%{opacity:0;transform:translateY(-50%) translate(-10px)}to{opacity:1;transform:translateY(-50%) translate(0)}}@media screen and (max-width:768px){.toc-sidebar,.toc-popover{display:none}}.templates-picker{padding:var(--spacing-4);background-color:var(--neutral-50);border-radius:4px;margin:var(--spacing-4) 0;.templates-picker-header{display:flex;align-items:center;gap:var(--spacing-2);margin-bottom:var(--spacing-3);font-size:14px;font-weight:500;color:var(--neutral-600)}.templates-picker-list{display:flex;gap:var(--spacing-3);overflow-x:auto;padding-bottom:4px;&::-webkit-scrollbar{display:none}.templates-picker-item{flex-shrink:0;width:200px;padding:var(--spacing-3);border:1px dashed var(--neutral-300);border-radius:6px;text-align:left;cursor:pointer;transition-property:border-color;transition-duration:.5s;&:hover{border-color:var(--neutral-400)}.templates-picker-item-name{font-size:14px;font-weight:500;color:var(--text-primary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.templates-picker-item-title{font-size:14px;font-weight:500;color:var(--text-secondary);margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.templates-picker-item-content{font-size:12px;color:var(--neutral-400);line-height:1.3;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}}}@media(max-width:768px){.templates-picker{.templates-picker-list{flex-direction:column;.templates-picker-item{width:100%}}}}.note-delete-modal{width:400px}.dropdown-container{position:relative;.dropdown-button{min-width:160px}.dropdown-menu{list-style:none;margin:4px 0 0;padding:0;top:100%;position:absolute;left:0;min-width:100%;box-shadow:#0000001a 0 10px 15px -3px,#0000000d 0 4px 6px -2px;background-color:var(--bg-secondary);z-index:1;max-height:198px;overflow:auto;border:1px solid var(--neutral-100);border-radius:4px;opacity:0;visibility:hidden;transform:translateY(-4px);transition:opacity .15s ease-out,transform .15s ease-out,visibility .15s ease-out;pointer-events:none;&::-webkit-scrollbar{display:none}}.dropdown-option{display:flex;justify-content:space-between;align-items:center;padding-left:12px;height:36px;margin:4px;border-radius:4px;border-bottom:none;white-space:nowrap;overflow:hidden;background-color:var(--bg-secondary);font:var(--sm);font-weight:500;font-size:14px;cursor:pointer;transition:background-color .5s;div{width:80px}&:hover,&.is-selected{background-color:var(--neutral-200);svg.lucide{display:block}}&:active{transform:scale(.98);transition:transform .15s ease-out}svg.lucide{display:none;width:20px;height:20px;padding:4px;margin-right:8px;transition:background-color .5s;line,circle,rect,path{stroke:var(--neutral-600)}&:hover{background-color:var(--neutral-200);border-radius:4px}&:active{transform:scale(.97);transition:transform .15s ease-out}}}&.is-open{.dropdown-menu{opacity:1;visibility:visible;transform:translateY(0);pointer-events:auto}.dropdown-button{border-radius:6px 6px 0 0}}}.note-preview{.note-preview-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4)}}.notes-editor-container{flex:1;padding:var(--spacing-6);padding-top:0;border-left:1px solid var(--neutral-100);transition-property:opacity,transform;transition-duration:.3s;transition-timing-function:ease-in-out;opacity:1;transform:translateY(0);overflow-y:auto;word-wrap:break-word;max-height:100%;-webkit-overflow-scrolling:touch;&::-webkit-scrollbar{display:none}&.is-hidden{opacity:0;padding:0;transform:translateY(10px)}&.is-expanded .notes-editor{width:var(--notes-editor-max-width);margin:0 auto}.notes-editor-toolbar{display:flex;justify-content:space-between;align-items:center;padding-top:18px;padding-bottom:18px;position:sticky;width:100%;top:0;background:var(--bg-primary);z-index:var(--z-base);.right-toolbar,.left-toolbar{display:flex;flex-direction:row-reverse}.right-toolbar .dropdown-menu{left:auto;right:0}.left-toolbar{margin-left:-12px}svg.lucide{cursor:pointer;width:20px;height:20px;margin-right:0;transition-property:stroke;transition-duration:var(--transition-normal);&:hover{rect,path{stroke:var(--neutral-900)}}&.notes-editor-toolbar-button-hide{width:24px;height:24px}}}}@media screen and (max-width:948px){.notes-editor-container{&.is-visible{width:100%;padding:var(--spacing-4);padding-top:0;height:calc(100% - (var(--mobile-navbar-height) + var(--safe-area-bottom)));position:absolute;top:0;left:0;right:0;bottom:calc(var(--mobile-navbar-height) + var(--safe-area-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}&.is-hidden{display:none}}}.notes-editor{outline:none;.notes-editor-empty-text{font:var(--sm);padding:var(--spacing-4);color:var(--neutral-400);display:flex;justify-content:center;align-items:center;margin-top:64px}}.notes-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:var(--spacing-4)}.notes-editor-title{font:var(--h1);&[contenteditable=true]{outline:none;border-bottom:1px solid var(--neutral-200);padding-bottom:4px;width:100%;margin-right:var(--spacing-4)}}.notes-editor-tags{margin-bottom:var(--spacing-4);.dropdown-container{max-width:200px}}.notes-editor-tags-input{padding:2px var(--spacing-2);outline:none;font-weight:500;color:var(--neutral-400);font-size:14px;border:1px dashed var(--neutral-300);background-color:var(--bg-primary);border-radius:4px;width:100px}.notes-editor-image-dropzone{display:block;border:1px dashed var(--neutral-300);padding:var(--spacing-4);margin:var(--spacing-2) 0;border-radius:4px;text-align:left;font-weight:500;color:var(--neutral-400);font-size:14px;cursor:pointer;transition-property:background-color,border-color;transition-duration:var(--transition-normal);&:hover{background-color:var(--neutral-50);border-color:var(--neutral-400)}&.dragover{background-color:var(--neutral-50)}}.notes-editor-image-attachment-preview{display:flex;overflow-x:auto;img{max-height:200px;box-shadow:var(--shadow-2);box-sizing:border-box;object-fit:cover;margin:16px 16px 16px 0;border-radius:4px}&::-webkit-scrollbar{display:none}}.notes-editor-textarea{font-family:var(--font-family-code);width:100%;border:none;outline:none;resize:none;padding-right:10px;display:block;border:1px solid var(--neutral-200);background-color:var(--bg-primary);color:var(--text-primary);padding:var(--spacing-4);border-radius:4px}.notes-grid-item-content,.notes-editor-rendered{display:block;overflow-x:auto;strong{font-weight:600}em{font-style:italic}h1{font:var(--h2)}h2{font:var(--h3)}h3{font:var(--h5)}h4,h5,h6{font:var(--h6)}p,blockquote,ul,ol,table{font:var(--p1);margin:0 0 16px}li{font:var(--p1);margin-bottom:4px}a{color:var(--neutral-500);text-decoration:none;border-bottom:1px dashed var(--neutral-500)}img{width:auto;max-width:100%}h1,h2,h3,h4,h5,h6{margin-top:32px;margin-bottom:12px;font-weight:600;line-height:1.3}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin-top:0}code{font:var(--code);background-color:var(--neutral-50);border-radius:4px;padding:var(--spacing-1) var(--spacing-2)}pre{margin:16px 0;padding:var(--spacing-3);background-color:var(--neutral-50);border-radius:4px;overflow:scroll;&::-webkit-scrollbar{display:none}code{background-color:unset;border-radius:0;padding:0}*{font:var(--code)}}blockquote{border-left:3px solid var(--neutral-700);padding-left:12px;margin:16px 0}ul{padding-left:24px}ol{padding-left:28px}p+ul,p+ol,h1+ul,h1+ol,h2+ul,h2+ol,h3+ul,h3+ol,h4+ul,h4+ol,h5+ul,h5+ol,h6+ul,h6+ol{margin-top:-8px}li>ul,li>ol{margin:4px 0 0}li>ul>li:last-child,li>ol>li:last-child{margin-bottom:0}.task-list-container{list-style:none;padding:0;margin:0}.task-list-item{padding-left:0}.task-list-item:has(>.task-list-container){margin-bottom:0;padding-bottom:0}.task-item-content{display:flex;align-items:center;gap:var(--spacing-2)}.task-list-item-checkbox{flex-shrink:0;cursor:pointer;color:var(--neutral-400);transition:color .2s ease;&:hover{color:var(--neutral-600);cursor:not-allowed}&.checked{color:var(--neutral-700);&:hover{color:var(--neutral-600)}}}.task-list-item>.task-list-container{padding-left:24px;margin-bottom:0}table{width:100%;border-collapse:collapse;margin:16px 0}table,th,td{border:1px solid var(--neutral-200);padding:8px 12px;width:max-content}th{text-align:left}hr{margin:32px 0;border:0;border-top:1px solid var(--neutral-100)}s{color:var(--neutral-400)}mark{background:#facc151a;color:var(--yellow-500);border-radius:4px;padding:2px}}.formatting-toolbar{display:flex;flex-wrap:wrap;gap:var(--spacing-2);margin:var(--spacing-3) 0;border:1px solid var(--neutral-300);border-radius:4px;align-items:center;.formatting-toolbar-group{display:flex;padding-right:var(--spacing-2);&:last-child{border-right:none;padding-right:0}.formatting-button{background:none;border:none;border-radius:4px;padding:6px var(--spacing-2);cursor:pointer;font-size:12px;font-weight:500;color:var(--text-primary);transition:all .2s ease;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center;white-space:nowrap;margin:4px;&:hover{background-color:var(--neutral-200)}&:active{background-color:var(--neutral-100);transform:translateY(0);box-shadow:none}svg.lucide{width:16px;height:16px;stroke:currentColor}strong,em,s,mark,code{font-size:12px;font-weight:600;margin:0;padding:0}mark{background:var(--yellow-200);border-radius:2px;padding:1px 2px}code{background:var(--neutral-100);border-radius:2px;padding:1px 2px;font-family:var(--font-family-code)}}}}@media screen and (max-width:948px){.formatting-toolbar{display:none}}.notes-editor-modal{width:90vw;max-width:1200px;height:80vh;max-height:800px;overflow:hidden;.modal-content{padding:0;height:100%;overflow:hidden}.notes-editor{height:100%;border:none;border-radius:0;padding:var(--spacing-8);padding-top:0;overflow-y:auto;.notes-editor-toolbar{padding-top:var(--spacing-8);padding-bottom:0}}}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:calc(100vh - 200px);text-align:center;padding:var(--spacing-8)}.empty-state-icon{margin-bottom:var(--spacing-3);svg{width:48px;height:48px;line,circle,rect,path{stroke:var(--neutral-400)}}}.empty-state-title{font:var(--h6);font-weight:400;color:var(--neutral-600);margin:0 0 var(--spacing-1) 0}.empty-state-description{max-width:280px;font:var(--sm);text-align:center;line-height:1.5;color:var(--neutral-400)}.empty-state-action{margin-top:var(--spacing-4)}.notes-list-container{width:var(--notes-list-width);transition-property:background-color;transition-duration:var(--transition-normal);overflow-y:auto;-webkit-overflow-scrolling:touch;max-height:100%;&::-webkit-scrollbar{display:none}&.grid{width:100%;background-color:var(--bg-secondary)}.notes-list-title{font:var(--h3);padding:var(--spacing-4);font-weight:400}a.notes-list-item,div.notes-list-item{display:block;padding:var(--spacing-4);border-bottom:1px solid var(--neutral-100);text-decoration:none;color:inherit;transition-property:background-color;transition-duration:var(--transition-normal);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;&:hover,&.is-active{background-color:var(--bg-secondary)}.notes-list-item-header{display:flex;justify-content:space-between;align-items:center}.notes-list-item-title{font-weight:500;white-space:nowrap;overflow:hidden;&.untitled{color:var(--neutral-300)}}&.is-selected{background-color:var(--bg-secondary)}.notes-list-item-checkbox{width:20px;height:20px;flex-shrink:0;animation:checkbox-appear .3s ease-out;margin-left:-2px;svg{width:20px;height:20px;circle,path{stroke-width:2}}&.is-checked{svg{circle,path{stroke:var(--neutral-900)}}}}.notes-list-item-body{flex:1;overflow:hidden}&:has(.notes-list-item-body){display:flex;align-items:center;gap:12px}.notes-list-item-pin{opacity:0;width:16px;height:16px;transform:translateY(-5px);transition:opacity,transform .3s;&.pinned{opacity:1;margin-left:4px;flex-shrink:0;transform:translateY(0);line,circle,rect,path{stroke-width:2;stroke:var(--neutral-300);fill:var(--neutral-300)}}}.notes-list-item-subcontainer{display:flex;justify-content:space-between;width:100%;overflow:hidden;margin-top:4px;.notes-list-item-subtext,.notes-list-item-tag{font:var(--sm);color:var(--neutral-400);align-content:end;white-space:nowrap;flex-shrink:0}.notes-list-item-tags{display:flex;gap:4px;margin-right:24px;flex:1;overflow:hidden;white-space:nowrap}}}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:20px;padding:0 20px 20px 10px;&.board{display:block;position:relative;width:100%;height:100vh;padding:0}.notes-grid-item{position:relative;height:500px;overflow:hidden;transition-property:box-shadow;transition-duration:var(--transition-normal);box-shadow:var(--shadow-2);border-radius:8px;padding:20px;border:1px solid var(--neutral-100);background-color:var(--bg-primary);display:block;text-decoration:none;color:inherit;cursor:pointer;zoom:.6;&.reveal-animate{opacity:0;transform:translateY(20px);animation:notes-grid-reveal .4s ease-out forwards;animation-delay:calc(var(--reveal-index, 1) * .05s)}.notes-grid-item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.notes-grid-item-title{font:var(--h4);&.untitled{color:var(--neutral-400)}}.notes-grid-item-pin{opacity:0;width:24px;height:24px;transform:translateY(-10px);transition:opacity,transform .3s;&.pinned{opacity:1;margin-left:4px;flex-shrink:0;transform:translateY(0);line,circle,rect,path{stroke-width:2;stroke:var(--neutral-300);fill:var(--neutral-300)}}}.notes-grid-item-content{overflow:hidden}.notes-grid-item-gradient{display:block;position:absolute;bottom:0;left:0;width:100%;height:300px;background:linear-gradient(180deg,transparent 50%,var(--bg-primary) 100%)}.notes-grid-item-tags{position:absolute;bottom:0;left:0;right:0;padding:20px;background:linear-gradient(180deg,transparent 0%,var(--bg-primary) 20%)}&.is-draggable{max-height:300px;height:auto;display:inline-block;width:200px;position:absolute;user-select:all;-webkit-user-select:all;-moz-user-select:all;-ms-user-select:all;cursor:move;transition:transform .1s;*{user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;cursor:move;pointer-events:none}&.is-dragging{opacity:.5}}&:hover{box-shadow:var(--shadow-4)}&:active{transform:scale(.98);transition:transform var(--transition-fast) ease-out}}}.notes-list-load-more-button{font:var(--sm);color:var(--neutral-400);display:flex;justify-content:center;padding:36px 0;cursor:pointer;transition:color .5s;&:hover{color:var(--neutral-600)}}.notes-list-spinner{display:flex;justify-content:center;align-items:center;margin-top:64px}}@keyframes checkbox-appear{0%{opacity:0;transform:scale(.5)}to{opacity:1;transform:scale(1)}}@keyframes notes-grid-reveal{to{opacity:1;transform:translateY(0)}}@media screen and (max-width:948px){.notes-list-container,.notes-grid-container{&.is-visible{width:100%;height:calc(100% - (var(--mobile-navbar-height) + var(--safe-area-bottom)));position:absolute;top:0;left:0;right:0;bottom:calc(var(--mobile-navbar-height) + var(--safe-area-bottom));overflow-y:auto;-webkit-overflow-scrolling:touch}&.is-hidden{display:none}}.notes-list-container{.notes-grid{grid-template-columns:repeat(auto-fill,100%)}}}.bulk-actions-panel{width:250px;padding:var(--spacing-6);margin:200px auto auto;.bulk-actions-panel-count{font:var(--sm);font-weight:600;color:var(--text-primary);margin-bottom:var(--spacing-6);padding-left:var(--spacing-3)}.bulk-actions-panel-row{display:flex;align-items:center;gap:var(--spacing-3);padding:var(--spacing-2);border-radius:6px;cursor:pointer;color:var(--text-primary);transition:background-color var(--transition-normal);&:hover{background-color:var(--neutral-100)}&.cancel{margin-top:var(--spacing-5)}.bulk-actions-panel-row-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px;flex-shrink:0;svg.lucide{width:18px;height:18px}}.bulk-actions-panel-row-label{font:var(--sm)}}}.bulk-actions-toolbar{display:none}@media screen and (max-width:948px){.bulk-actions-toolbar{display:flex;align-items:center;justify-content:space-between;position:fixed;bottom:calc(var(--mobile-navbar-height) + var(--safe-area-bottom));left:0;right:0;height:52px;padding:0 var(--spacing-2);background-color:var(--bg-primary);box-shadow:var(--shadow-6);z-index:3;.bulk-actions-toolbar-left{display:flex;align-items:center;gap:var(--spacing-1)}.bulk-actions-toolbar-right{display:flex;align-items:center}.bulk-actions-toolbar-close,.bulk-actions-toolbar-icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:4px;cursor:pointer;color:var(--neutral-500);&:hover{background-color:var(--neutral-100);color:var(--text-primary)}svg.lucide{width:18px;height:18px}}.bulk-actions-toolbar-count{font:var(--sm);font-weight:600;color:var(--text-primary);padding:0 var(--spacing-1)}.bulk-actions-toolbar-select-all{font:var(--sm);font-weight:600;padding:6px 10px;border-radius:6px;cursor:pointer;color:var(--neutral-500);&:hover{background-color:var(--neutral-100);color:var(--text-primary)}}}}.mobile-navbar-container{display:none;position:fixed;bottom:0;left:0;right:0;width:100%;height:calc(var(--mobile-navbar-height) + var(--safe-area-bottom));z-index:2;background-color:var(--bg-primary);padding-bottom:var(--safe-area-bottom);.mobile-navbar{display:flex;justify-content:space-around;padding:8px;height:var(--mobile-navbar-height);background-color:var(--bg-primary);box-shadow:var(--shadow-6);.mobile-navbar-button{display:flex;align-items:center;text-decoration:none;color:var(--neutral-900);min-height:44px;font:var(--sm);svg.lucide{padding:8px;line,circle,rect,path{stroke-width:2.5}}}}}@media screen and (max-width:948px){.mobile-navbar-container{display:block}}.templates-list-toolbar{display:flex;justify-content:space-between;padding:var(--spacing-2) 0;margin:6px var(--spacing-3) 0 4px;.templates-list-toolbar-left{display:flex;align-items:center;gap:var(--spacing-2);svg.lucide{cursor:pointer;width:20px;height:20px;margin:var(--spacing-2);margin-right:0;transition-property:stroke;transition-duration:.5s;&:hover{rect,path,circle{stroke:var(--neutral-900)}}}}}.templates-list-item{display:flex;background:var(--bg-primary);border-bottom:1px solid var(--neutral-100);padding:var(--spacing-4);transition:background-color .2s ease;text-decoration:none;color:inherit;position:relative;&:hover{background:var(--bg-secondary)}.templates-list-item-main{flex:1;min-width:0}.templates-list-item-header{margin-bottom:var(--spacing-2)}.templates-list-item-title{font-size:16px;font-weight:500;margin:0 0 4px;line-height:1.4}.templates-list-item-description{font-size:14px;color:var(--neutral-400);margin:4px 0 0;line-height:1.3}.templates-list-item-footer{display:flex;justify-content:space-between;align-items:center;margin-top:var(--spacing-2)}.templates-list-item-tags{display:flex;flex-wrap:wrap;gap:4px}.templates-list-item-subtext,.templates-list-item-tag{font:var(--sm);color:var(--neutral-400);align-content:end;white-space:nowrap}}.templates-list-container{width:280px;&::-webkit-scrollbar{display:none}.templates-list-spinner{display:flex;justify-content:center;align-items:center;min-height:200px}.templates-list{padding:0}}.templates-editor-container{flex:1;padding:0 24px 24px;border-left:1px solid var(--neutral-100)}.templates-editor{display:flex;flex-direction:column;height:100%;background:var(--bg-primary);.templates-editor-header{display:flex;justify-content:space-between;align-items:center;padding:16px 0;background:var(--bg-primary);.templates-editor-header-left{display:flex;align-items:center;flex-direction:row-reverse}.templates-editor-title{font-size:20px;font-weight:600;margin:0}.templates-editor-header-right{display:flex;align-items:center;flex-direction:row-reverse;.dropdown-menu{left:auto;right:0}svg.lucide{cursor:pointer;width:20px;height:20px;margin-right:0;transition-property:stroke;transition-duration:.5s;&:hover{rect,path{stroke:var(--neutral-900)}}}}}.templates-editor-content{flex:1;overflow-y:auto;.input-container{margin-bottom:24px}.form-field-container .notes-editor-tags{margin-top:var(--spacing-1)}.templates-editor-field{margin-bottom:24px}.templates-editor-textarea{width:100%;min-height:200px;padding:12px;border:1px solid var(--neutral-200);border-radius:4px;font-family:var(--font-family-code);font-size:16px;line-height:1.5;resize:vertical;background:var(--bg-primary);color:var(--text-color);transition:border-color .2s;&:focus{outline:none;border-color:var(--blue-500)}}.templates-editor-help{margin-top:var(--spacing-6);h4{font-size:16px;font-weight:600}pre{background-color:var(--neutral-50);border:1px solid var(--neutral-200);border-radius:6px;padding:12px;font-family:var(--font-family-code);font-size:12px;line-height:1.4;color:var(--neutral-600);margin-top:var(--spacing-1);overflow-x:auto;white-space:pre}}}}@media(max-width:768px){.templates-editor{.templates-editor-content{padding:12px;.templates-editor-field{margin-bottom:20px}}.templates-editor-header{.templates-editor-title{font-size:18px}}}}.canvas-note-picker{position:fixed;top:48px;right:0;width:400px;height:calc(100vh - 48px);background:var(--neutral-50);border-left:1px solid var(--neutral-100);display:flex;flex-direction:column;z-index:2;.canvas-note-picker-input-container{display:flex;align-items:center;padding-left:2px;margin:var(--spacing-2);background-color:var(--neutral-100);border-radius:4px;input{border:0;outline:0;width:100%;height:40px;padding-left:10px;color:var(--text-primary);background-color:var(--neutral-100);border-radius:4px}}svg.lucide{padding:var(--spacing-2)}.canvas-note-picker-tabs{padding:var(--spacing-2);border-bottom:1px solid var(--neutral-100)}.canvas-note-picker-tab-content{flex:1;overflow-y:auto;display:flex;flex-direction:column;&::-webkit-scrollbar{display:none}}.canvas-note-picker-empty{padding:32px 16px;text-align:center;color:var(--neutral-400);font-size:14px}.canvas-note-picker-load-more{margin:0 16px 16px;padding:10px 16px;background:var(--neutral-100);border:1px solid var(--neutral-200);border-radius:6px;cursor:pointer;font-size:14px;font-weight:500;color:var(--neutral-700);transition:background-color var(--transition-normal);&:hover{background:var(--neutral-200)}&:active{transform:scale(.98)}}.canvas-note-picker-results{flex:1;overflow-y:auto;&::-webkit-scrollbar{display:none}.canvas-note-picker-section{margin-bottom:20px}.canvas-note-picker-section-title{font:var(--sm);font-size:12px;color:var(--neutral-400);padding:10px 16px;font-weight:500}.notes-list-item{padding:var(--spacing-4);border-bottom:1px solid var(--neutral-100);cursor:pointer;transition-property:background-color;transition-duration:var(--transition-normal);&:hover{background-color:var(--bg-secondary)}.notes-list-item-title{font-weight:500;white-space:nowrap;overflow:hidden;&.untitled{color:var(--neutral-300)}}}.canvas-note-picker-images{display:flex;flex-direction:column;gap:10px;padding:16px}.canvas-image-card{width:100%;height:200px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform var(--transition-normal);box-shadow:var(--shadow-2);&:hover{transform:scale(1.01);box-shadow:var(--shadow-4)}&:active{transform:scale(.98)}}}}.canvas-note-picker-images-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:16px}.canvas-image-card-grid{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform var(--transition-normal);box-shadow:var(--shadow-2);&:hover{transform:scale(1.02);box-shadow:var(--shadow-4)}&:active{transform:scale(.98)}}.canvas-toolbar{position:fixed;top:0;left:0;right:0;height:48px;background:var(--neutral-50);border-bottom:1px solid var(--neutral-200);display:flex;align-items:center;justify-content:space-between;padding:0 16px;z-index:3;.canvas-toolbar-left{display:flex;align-items:center;gap:12px}.canvas-toolbar-right{display:flex;align-items:center;gap:4px}.canvas-toolbar-title{font-size:16px;font-weight:600;color:var(--text-primary);margin:0;cursor:pointer;&:hover{color:var(--text-secondary)}}.canvas-toolbar-title-input{font-size:16px;font-weight:600;color:var(--text-primary);margin:0;padding:2px 6px;border:1px solid var(--neutral-300);border-radius:4px;background:var(--bg-primary);outline:none;font-family:var(--font-family);width:200px}.canvas-toolbar-button{display:flex;align-items:center;justify-content:center;width:32px;height:32px;border:none;background:transparent;color:var(--text-secondary);border-radius:4px;cursor:pointer;transition:background-color var(--transition-fast),color var(--transition-fast);&:hover{background:var(--neutral-100);color:var(--text-primary)}&:active{background:var(--neutral-200)}&.active{background:var(--neutral-200);color:var(--text-primary)}&:disabled{opacity:.4;cursor:not-allowed;&:hover{background:transparent;color:var(--text-secondary)}}svg{width:18px;height:18px}}.canvas-toolbar-alignment-group{display:flex;align-items:center;gap:2px}.canvas-toolbar-zoom-level{font-size:12px;font-weight:500;min-width:48px;width:auto;padding:0 8px}.canvas-toolbar-divider{width:1px;height:20px;background:var(--neutral-200);margin:0 4px}}.canvas-page{width:100%;height:100vh;display:flex;flex-direction:column;overflow:hidden;padding-top:48px;.canvas-container{flex:1;position:relative;overflow:hidden;background:var(--bg-primary)}.canvas-loading{display:flex;align-items:center;justify-content:center;height:100%;font-size:1.125rem;color:var(--text-secondary)}}.canvases-list-toolbar{display:flex;justify-content:space-between;padding:var(--spacing-2) 0;margin:6px var(--spacing-3) 0 4px;.canvases-list-toolbar-left{display:flex;align-items:center;gap:var(--spacing-2);button{background:none;border:none;padding:0;display:flex;align-items:center}svg.lucide{cursor:pointer;width:20px;height:20px;margin:var(--spacing-2);margin-right:0;transition-property:stroke;transition-duration:.5s;&:hover{rect,path,circle{stroke:var(--neutral-900)}}}}}.canvas-delete-modal{width:400px}.canvases-page-content{flex:1;overflow-y:auto;&::-webkit-scrollbar{display:none}}.canvases-spinner{display:flex;justify-content:center;align-items:center;min-height:200px}.canvases-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:20px;padding:var(--spacing-3)}.canvas-card{border:1px solid var(--neutral-100);border-radius:8px;overflow:hidden;cursor:pointer;box-shadow:var(--shadow-2);transition:box-shadow var(--transition-fast);background:var(--bg-primary);&:hover{box-shadow:var(--shadow-4);.canvas-card-delete{opacity:1}}}.canvas-card-preview{position:relative;margin:16px auto;background:var(--bg-primary);border-radius:4px}.canvas-card-preview-empty{width:200px;height:150px}.canvas-card-preview-node{position:absolute;border:1px solid;border-radius:2px}.canvas-card-info{padding:12px 10px 12px 16px;border-top:1px solid var(--neutral-100)}.canvas-card-title{font-size:14px;font-weight:500;color:var(--text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.canvas-card-meta{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.canvas-card-date{font-size:12px;color:var(--text-secondary)}.canvas-card-delete{display:flex;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:none;background:transparent;color:var(--text-secondary);border-radius:4px;cursor:pointer;opacity:0;transition:opacity var(--transition-fast),color var(--transition-fast);&:hover{color:var(--red-600)}svg.lucide{width:16px;height:16px}}.login-container{display:flex;flex-direction:column;margin:auto;.login-title{font:var(--h5)}.login-subtitle{margin-top:4px;color:var(--neutral-400)}.button{margin-top:24px;align-self:flex-start}}.offline-indicator{position:fixed;top:0;background:var(--red-600);color:#fff;text-align:center;font:var(--sm);z-index:var(--z-critical);left:calc(50% - 75px);width:150px;padding:var(--spacing-1);border-radius:0 0 4px 4px}.tooltip{position:absolute;z-index:var(--z-popover);display:flex;align-items:center;padding:2px 8px;background-color:var(--neutral-800);color:var(--neutral-50);border-radius:4px;font-size:12px;max-width:300px;word-wrap:break-word;box-shadow:var(--shadow-4);pointer-events:none;opacity:0;transition:opacity .15s ease-in-out,transform .15s ease-in-out;will-change:transform,opacity;&.top{transform:translateY(4px)}&.bottom{transform:translateY(-4px)}&.left{transform:translate(4px)}&.right{transform:translate(-4px)}&.visible{opacity:1;transform:translate(0)}div{color:var(--neutral-400);font-size:12px;margin-left:10px}}