.notes-app{--ns-bg: var(--bg, #0c0c0c);--ns-surface: var(--surface, #141414);--ns-border: var(--border, #272727);--ns-text: var(--text, #efefef);--ns-dim: var(--text-dim, #666);--ns-accent: var(--accent, #c8f135);--ns-radius: var(--radius, 10px);display:grid;grid-template-columns:280px 1fr;height:600px;border:1px solid var(--ns-border);border-radius:var(--ns-radius);overflow:hidden;background:var(--ns-surface);font-family:inherit}.sidebar{display:flex;flex-direction:column;border-right:1px solid var(--ns-border);background:var(--ns-bg);overflow:hidden}.sidebar-header{display:flex;align-items:center;justify-content:space-between;padding:1.1rem 1.2rem .8rem;border-bottom:1px solid var(--ns-border);flex-shrink:0}.sidebar-title{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ns-dim)}.btn-new{width:28px;height:28px;border-radius:6px;border:1px solid var(--ns-border);background:transparent;color:var(--ns-accent);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,border-color .15s}.btn-new:hover{background:#c8f1351f;border-color:var(--ns-accent)}.search-wrap{position:relative;padding:.75rem 1rem;border-bottom:1px solid var(--ns-border);flex-shrink:0}.search-icon{position:absolute;left:1.65rem;top:50%;transform:translateY(-50%);color:var(--ns-dim);pointer-events:none}.search-input{width:100%;background:#ffffff0a;border:1px solid var(--ns-border);border-radius:6px;padding:.45rem .75rem .45rem 2.1rem;font-size:.82rem;color:var(--ns-text);outline:none;transition:border-color .15s;box-sizing:border-box;font-family:inherit}.search-input::placeholder{color:var(--ns-dim)}.search-input:focus{border-color:var(--ns-accent)}.notes-list{flex:1;overflow-y:auto;padding:.4rem 0;scrollbar-width:thin;scrollbar-color:var(--ns-border) transparent}.notes-list::-webkit-scrollbar{width:4px}.notes-list::-webkit-scrollbar-track{background:transparent}.notes-list::-webkit-scrollbar-thumb{background:var(--ns-border);border-radius:4px}.note-item{padding:.8rem 1.2rem .75rem;cursor:pointer;border-left:2px solid transparent;border-bottom:1px solid var(--ns-border);transition:background .12s,border-left-color .12s;position:relative;display:block;box-sizing:border-box;text-decoration:none}.note-item:last-child{border-bottom:none}.note-item:hover{background:#ffffff0a}.note-item.active{background:#c8f13512;border-left-color:var(--ns-accent)}.note-item-title{font-size:.875rem;font-weight:600;color:var(--ns-text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 .3rem;line-height:1.3;display:block}.note-item.active .note-item-title{color:var(--ns-text)}.note-item-preview{font-size:.775rem;color:var(--ns-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin:0 0 .35rem;line-height:1.4;display:block}.note-item-meta{font-size:.7rem;color:var(--ns-dim);opacity:.55;display:block;line-height:1.2}.sidebar-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--ns-dim);opacity:.5;padding:2rem;text-align:center}.sidebar-empty p{font-size:.85rem;margin:0}.editor-area{display:flex;flex-direction:column;overflow:hidden;background:var(--ns-surface)}.editor-toolbar{display:flex;align-items:center;justify-content:space-between;padding:.65rem 1.25rem;border-bottom:1px solid var(--ns-border);gap:.5rem;flex-shrink:0}.toolbar-left,.toolbar-right{display:flex;align-items:center;gap:.4rem}.format-btns{display:flex;gap:.2rem;padding-left:.4rem;border-left:1px solid var(--ns-border);margin-left:.2rem;align-items:center}.tool-btn{height:28px;padding:0 .55rem;border-radius:5px;border:1px solid transparent;background:transparent;color:var(--ns-dim);font-size:.78rem;cursor:pointer;display:inline-flex;align-items:center;gap:.3rem;transition:all .12s;font-family:inherit;text-decoration:none}.tool-btn:hover{background:#ffffff0f;color:var(--ns-text);border-color:var(--ns-border)}.danger-btn:hover{background:#ff50501a!important;color:#ff5050!important;border-color:#ff50504d!important}.btn-fullscreen{width:28px;padding:0;justify-content:center}.btn-fullscreen:hover,.tool-btn.active-spell{color:var(--ns-accent)!important;border-color:var(--ns-accent)!important;background:#c8f13514!important}.note-date{font-size:.72rem;color:var(--ns-dim);opacity:.5}.export-wrap{position:relative}.export-trigger{border:1px solid var(--ns-border)!important;color:var(--ns-dim)!important}.export-trigger:hover{border-color:var(--ns-accent)!important;color:var(--ns-accent)!important;background:#c8f13514!important}.export-menu{position:absolute;top:calc(100% + 6px);right:0;background:var(--ns-bg);border:1px solid var(--ns-border);border-radius:8px;overflow:hidden;z-index:50;min-width:120px;box-shadow:0 8px 24px #00000080}.export-item{display:block;width:100%;padding:.6rem 1rem;background:transparent;border:none;color:var(--ns-dim);font-size:.82rem;text-align:left;cursor:pointer;transition:background .1s,color .1s;font-family:inherit;box-sizing:border-box}.export-item:hover{background:#c8f13514;color:var(--ns-accent)}.editor-title-wrap{padding:1.25rem 1.5rem 0;flex-shrink:0}.editor-title{width:100%;background:transparent;border:none;outline:none;font-size:1.5rem;font-weight:700;letter-spacing:-.03em;color:var(--ns-text);font-family:inherit;box-sizing:border-box}.editor-title::placeholder{color:var(--ns-dim);opacity:.4}.editor-content{flex:1;padding:1rem 1.5rem 1.5rem;overflow-y:auto;outline:none;font-size:.95rem;line-height:1.75;color:var(--ns-text);scrollbar-width:thin;scrollbar-color:var(--ns-border) transparent}.editor-content:empty:before{content:attr(data-placeholder);color:var(--ns-dim);opacity:.35;pointer-events:none;display:block}.editor-content ul{padding-left:1.5rem;margin:.5rem 0}.editor-content strong{color:var(--ns-text)}.editor-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.75rem;color:var(--ns-dim);padding:2rem;text-align:center}.empty-icon{opacity:.2}.empty-title{font-size:1.1rem;font-weight:600;color:var(--ns-text);margin:0}.empty-sub{font-size:.85rem;opacity:.5;margin:0;color:var(--ns-dim)}.empty-sub kbd{display:inline-block;padding:.1rem .4rem;border:1px solid var(--ns-border);border-radius:4px;font-size:.75rem;font-family:inherit;color:var(--ns-text)}.btn-create-first{margin-top:.5rem;padding:.55rem 1.25rem;background:var(--ns-accent);color:#000;border:none;border-radius:8px;font-size:.85rem;font-weight:700;cursor:pointer;transition:opacity .15s;font-family:inherit}.btn-create-first:hover{opacity:.85}.toast{position:fixed;bottom:2rem;right:2rem;background:var(--ns-accent);color:#000;font-size:.82rem;font-weight:600;padding:.6rem 1.1rem;border-radius:8px;z-index:999;opacity:0;transform:translateY(8px);transition:opacity .2s,transform .2s;pointer-events:none}.toast.show{opacity:1;transform:translateY(0)}@media(max-width:640px){.notes-app{grid-template-columns:1fr;height:580px}.sidebar{display:none;border-right:none;border-bottom:1px solid var(--ns-border)}.sidebar.mobile-open{display:flex;height:100%}.editor-area.mobile-hidden{display:none}#btnBack{display:flex!important}#btnSpellcheck,.note-date{display:none!important}}.ns-overlay{display:none;position:fixed;inset:0;background:#0000008c;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:200;align-items:center;justify-content:center}.ns-overlay.open{display:flex;animation:ns-fade-in .15s ease}@keyframes ns-fade-in{0%{opacity:0}to{opacity:1}}.ns-popup{background:var(--ns-surface, #141414);border:1px solid var(--ns-border, #272727);border-radius:14px;padding:1.75rem 1.75rem 1.5rem;width:280px;display:flex;flex-direction:column;align-items:center;gap:.5rem;text-align:center;box-shadow:0 20px 60px #0009;animation:ns-pop-in .18s cubic-bezier(.34,1.56,.64,1)}@keyframes ns-pop-in{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.ns-popup-icon{width:40px;height:40px;border-radius:10px;background:#ff50501f;border:1px solid rgba(255,80,80,.2);color:#ff5050;display:flex;align-items:center;justify-content:center;margin-bottom:.5rem}.ns-popup-title{font-size:1rem;font-weight:700;color:var(--ns-text, #efefef);margin:0;letter-spacing:-.02em}.ns-popup-sub{font-size:.82rem;color:var(--ns-dim, #666);margin:0 0 .75rem;line-height:1.5}.ns-popup-actions{display:flex;gap:.6rem;width:100%}.ns-btn-cancel,.ns-btn-confirm{flex:1;height:34px;border-radius:8px;font-size:.82rem;font-weight:600;cursor:pointer;border:1px solid;transition:all .15s;font-family:inherit}.ns-btn-cancel{background:transparent;border-color:var(--ns-border, #272727);color:var(--ns-dim, #666)}.ns-btn-cancel:hover{background:#ffffff0d;color:var(--ns-text, #efefef);border-color:var(--ns-text, #efefef)}.ns-btn-confirm{background:#ff50501f;border-color:#ff50504d;color:#ff5050}.ns-btn-confirm:hover{background:#ff505038;border-color:#ff5050}.color-wrap{position:relative}.color-btn{display:inline-flex;align-items:center;gap:3px;padding:0 .45rem;flex-direction:column;height:28px;justify-content:center}.color-indicator{display:block;width:14px;height:3px;border-radius:2px;background:#efefef;transition:background .15s;flex-shrink:0}.color-menu{position:absolute;top:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--ns-bg);border:1px solid var(--ns-border);border-radius:10px;padding:.5rem;z-index:100;display:grid;grid-template-columns:repeat(3,1fr);gap:5px;box-shadow:0 8px 24px #0009;width:108px}.color-swatch{width:28px;height:28px;border-radius:6px;border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:transform .1s,box-shadow .1s;padding:0}.color-swatch:hover{transform:scale(1.18);box-shadow:0 0 0 2px #ffffff40}.remove-color{background:transparent!important;color:var(--ns-dim);font-size:.75rem;display:flex;align-items:center;justify-content:center;border-color:var(--ns-border)!important}.remove-color:hover{color:#ff5050!important;box-shadow:0 0 0 2px #ff50504d!important;transform:scale(1.1)!important}