*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #060412;--surface: #0f0a24;--surface2: #1a1040;--border: rgba(160, 80, 220, .25);--text: #f1ecff;--muted: #9b86cc;--accent: #a855f7;--red: #ef4444}[data-theme=light]{--bg: #faf5ff;--surface: #ffffff;--surface2: #f3e8ff;--border: rgba(160, 80, 220, .2);--text: #1a0d3b;--muted: #7c3aed;--accent: #9333ea;--red: #dc2626}html,body{height:100%;background-color:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif;font-size:16px;line-height:1.5;transition:background-color .2s,color .2s}.app-root{min-height:100vh;display:flex;flex-direction:column}.app-header{position:sticky;top:0;z-index:100;display:flex;align-items:center;gap:1rem;padding:.75rem 1.25rem;background:var(--bg);border-bottom:1px solid var(--border);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.app-header-left{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.app-logo{font-size:1.4rem}.app-title{font-size:1.15rem;font-weight:700;color:var(--text);letter-spacing:-.01em}.app-header-center{flex:1;max-width:480px;margin:0 auto}.app-search{width:100%;background:var(--surface2);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:.9rem;font-family:inherit;padding:.4rem .85rem;outline:none;transition:border-color .15s}.app-search:focus{border-color:var(--accent)}.app-search::placeholder{color:var(--muted);opacity:.6}.app-header-right{display:flex;align-items:center;gap:.5rem;flex-shrink:0}.app-btn{background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--muted);font-size:1.1rem;padding:.3rem .5rem;cursor:pointer;transition:border-color .15s,color .15s;line-height:1}.app-btn:hover,.app-btn.active{border-color:var(--accent);color:var(--accent)}.app-new-bar{padding:1rem 1.25rem 0;display:flex;justify-content:flex-end}.app-new-btn{background:var(--accent);color:#fff;border:none;border-radius:8px;font-size:.9rem;font-family:inherit;font-weight:600;padding:.5rem 1.1rem;cursor:pointer;transition:opacity .15s,transform .1s}.app-new-btn:hover{opacity:.9;transform:translateY(-1px)}.app-main{flex:1;padding:1.25rem}.app-loading,.app-empty{text-align:center;color:var(--muted);padding:3rem 1rem;font-size:.95rem}.app-error{display:flex;align-items:center;gap:1rem;color:var(--red);background:#ef44441a;border:1px solid rgba(239,68,68,.3);border-radius:8px;padding:.75rem 1rem;font-size:.9rem}.app-error button{background:transparent;border:1px solid var(--red);border-radius:5px;color:var(--red);font-size:.82rem;padding:.25rem .6rem;cursor:pointer}.note-section{margin-bottom:1.5rem}.note-section-label{font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);margin-bottom:.6rem;opacity:.7}.note-masonry{columns:4 220px;column-gap:.85rem}.note-card-wrapper{break-inside:avoid;margin-bottom:.85rem;display:inline-block;width:100%;position:relative;overflow:hidden;border-radius:12px}.note-swipe-hint{position:absolute;right:0;top:0;bottom:0;width:64px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;background:#ef444440;border-radius:0 12px 12px 0;pointer-events:none;transition:opacity .1s}.note-card{display:block;width:100%;border:1.5px solid;border-radius:12px;cursor:pointer;transition:transform .12s,box-shadow .12s;overflow:hidden;position:relative;outline:none;touch-action:pan-y;will-change:transform}.note-card:hover,.note-card:focus-visible{transform:translateY(-2px);box-shadow:0 8px 24px #0000004d}.note-color-bar{width:100%;height:3px;flex-shrink:0}.note-card-inner{padding:.75rem .9rem .6rem}.note-card-title{font-size:.92rem;font-weight:700;color:var(--text);margin-bottom:.35rem;letter-spacing:-.01em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-card-body{font-size:.83rem;color:var(--muted);line-height:1.55;overflow:hidden;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;word-break:break-word}.note-card-checklist{display:flex;flex-direction:column;gap:.2rem}.note-check-item{display:flex;align-items:center;gap:.35rem;font-size:.82rem}.note-checkbox{color:var(--muted);font-size:.85rem;flex-shrink:0}.note-check-text{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-check-text.checked{text-decoration:line-through;opacity:.45}.note-overflow{font-size:.75rem;color:var(--muted);opacity:.55;margin-top:.15rem}.note-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;padding-top:.4rem;border-top:1px solid var(--border)}.note-footer-left{display:flex;align-items:center;gap:.4rem}.note-color-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}.note-checked-count{font-size:.72rem;color:var(--muted);opacity:.65}.note-footer-actions{display:flex;gap:.15rem}.note-action-btn{background:transparent;border:none;color:var(--muted);font-size:.85rem;padding:.2rem .3rem;cursor:pointer;border-radius:5px;transition:color .12s,background .12s;opacity:0;line-height:1;min-width:32px;min-height:32px;display:flex;align-items:center;justify-content:center}.note-card:hover .note-action-btn,.note-action-btn:focus{opacity:1}@media(hover:none)and (pointer:coarse){.note-action-btn{opacity:.7;font-size:1rem;padding:.3rem .4rem}.note-action-btn.active{opacity:1}}.note-action-btn:hover{color:var(--text);background:#ffffff14}.note-action-btn.active{opacity:1;color:var(--accent)}.ne-overlay{position:fixed;top:0;right:0;bottom:0;left:0;z-index:1000;background:#000000a6;display:flex;align-items:center;justify-content:center;padding:1rem;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);animation:ne-fade-in .15s ease}@keyframes ne-fade-in{0%{opacity:0}to{opacity:1}}.ne-modal{display:flex;flex-direction:row;width:100%;max-width:860px;max-height:90vh;border:1.5px solid;border-radius:14px;overflow:hidden;box-shadow:0 20px 60px #00000080;animation:ne-slide-in .18s ease}@keyframes ne-slide-in{0%{transform:translateY(12px);opacity:0}to{transform:translateY(0);opacity:1}}.ne-edit-area{flex:1;display:flex;flex-direction:column;padding:1.5rem;overflow-y:auto;min-width:0}.ne-kind-toggle{display:flex;gap:0;margin-bottom:1rem;border:1px solid var(--border);border-radius:8px;overflow:hidden;width:fit-content}.ne-kind-btn{background:transparent;border:none;color:var(--muted);font-size:.82rem;font-family:inherit;padding:.35rem .9rem;cursor:pointer;transition:background .15s,color .15s;white-space:nowrap}.ne-kind-btn:first-child{border-right:1px solid var(--border)}.ne-kind-btn:hover{background:#ffffff0f;color:var(--text)}.ne-kind-btn.active{background:var(--accent);color:#fff;font-weight:600}[data-theme=light] .ne-kind-btn:hover{background:#0000000a}.ne-title-input{background:transparent;border:none;outline:none;font-size:1.25rem;font-weight:700;font-family:inherit;color:var(--text);width:100%;margin-bottom:.85rem;padding:0;letter-spacing:-.01em}.ne-title-input::placeholder{color:var(--muted);opacity:.6}.ne-body-textarea{background:transparent;border:none;outline:none;font-size:.95rem;font-family:inherit;color:var(--text);width:100%;flex:1;resize:none;line-height:1.65;overflow:hidden;min-height:200px;padding:0;white-space:pre-wrap;word-break:break-word}.ne-body-textarea::placeholder{color:var(--muted);opacity:.5}.ne-checklist-placeholder{flex:1}.ne-muted{color:var(--muted);font-size:.9rem;opacity:.6}.ne-status{height:1.2rem;margin-top:.5rem}.ne-saving{font-size:.75rem;color:var(--muted);opacity:.7;animation:ne-pulse 1s ease infinite}@keyframes ne-pulse{0%,to{opacity:.7}50%{opacity:.35}}.ne-meta-panel{width:200px;flex-shrink:0;border-left:1px solid var(--border);padding:1.25rem 1rem;display:flex;flex-direction:column;gap:.15rem;overflow-y:auto;background:#0000001f}.ne-meta-section{padding:.6rem 0;border-bottom:1px solid rgba(255,255,255,.05)}.ne-meta-section:last-child{border-bottom:none}.ne-meta-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:.4rem}.ne-color-picker{display:flex;flex-wrap:wrap;gap:.4rem}.ne-color-swatch{width:22px;height:22px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:transform .12s,border-color .12s;flex-shrink:0}.ne-color-swatch:hover{transform:scale(1.15)}.ne-color-swatch.active{border-color:var(--text);transform:scale(1.1)}.ne-meta-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:.82rem;font-family:inherit;padding:.35rem .6rem;cursor:pointer;width:100%;text-align:left;transition:color .15s,border-color .15s,background .15s}.ne-meta-btn:hover{color:var(--text);border-color:var(--accent)}.ne-meta-btn.active{color:var(--accent);border-color:var(--accent)}.ne-delete-btn:hover{color:var(--red);border-color:var(--red)}.ne-delete-confirm{display:flex;flex-direction:column;gap:.4rem}.ne-delete-actions{display:flex;flex-direction:column;gap:.25rem}.ne-confirm-yes{background:var(--red);color:#fff;border:none;border-radius:5px;padding:.35rem .5rem;font-size:.8rem;font-family:inherit;cursor:pointer;transition:opacity .15s}.ne-confirm-yes:hover{opacity:.85}.ne-confirm-no{background:transparent;border:1px solid var(--border);border-radius:5px;color:var(--muted);padding:.3rem .5rem;font-size:.8rem;font-family:inherit;cursor:pointer}.ne-confirm-no:hover{color:var(--text)}.ne-timestamps{margin-top:auto}.ne-timestamp{font-size:.75rem;color:var(--muted);opacity:.7}.ne-close-wrap{margin-top:auto}.ne-close-btn{background:transparent;border:1px solid var(--border);border-radius:6px;color:var(--muted);font-size:.82rem;font-family:inherit;padding:.35rem .6rem;cursor:pointer;width:100%;text-align:center;transition:color .15s,border-color .15s}.ne-close-btn:hover{color:var(--text);border-color:var(--accent)}[data-theme=light] .ne-meta-panel{background:#0000000a}[data-theme=light] .ne-meta-section{border-bottom-color:#0000000f}[data-theme=light] .ne-meta-btn:hover{background:#0000000a}.cle-root{display:flex;flex-direction:column;gap:0;width:100%;min-height:80px}.cle-item-row{display:flex;align-items:center;gap:.4rem;padding:.25rem 0;border-radius:6px;transition:background .1s}.cle-item-row:hover{background:#ffffff0a}.cle-item-row.cle-checked .cle-item-text{text-decoration:line-through;opacity:.45}.cle-drag-handle{cursor:grab;color:var(--muted);font-size:1rem;padding:0 .1rem;opacity:.4;flex-shrink:0;-webkit-user-select:none;user-select:none;line-height:1}.cle-drag-handle:active{cursor:grabbing}.cle-drag-disabled{cursor:default;opacity:.2}.cle-checkbox{width:16px;height:16px;cursor:pointer;flex-shrink:0;accent-color:var(--accent)}.cle-item-text{flex:1;background:transparent;border:none;outline:none;font-size:.92rem;font-family:inherit;color:var(--text);padding:0;min-width:0;line-height:1.5}.cle-item-text::placeholder{color:var(--muted);opacity:.4}.cle-delete-btn{background:transparent;border:none;color:var(--muted);font-size:.72rem;cursor:pointer;padding:.15rem .3rem;border-radius:4px;flex-shrink:0;opacity:0;transition:opacity .12s,color .12s;line-height:1}.cle-item-row:hover .cle-delete-btn,.cle-item-row .cle-delete-btn:focus{opacity:1}.cle-delete-btn:hover{color:var(--red)}.cle-checked-divider{display:flex;align-items:center;gap:.5rem;margin:.5rem 0 .25rem;font-size:.72rem;color:var(--muted);opacity:.55;text-transform:uppercase;letter-spacing:.06em}.cle-checked-divider:before,.cle-checked-divider:after{content:"";flex:1;height:1px;background:var(--border);opacity:.4}.cle-add-row{display:flex;align-items:center;gap:.5rem;padding:.35rem 0;margin-top:.25rem;border-top:1px solid rgba(255,255,255,.05)}.cle-add-icon{color:var(--muted);font-size:1rem;opacity:.45;flex-shrink:0;width:1.2rem;text-align:center;line-height:1}.cle-new-item-input{flex:1;background:transparent;border:none;outline:none;font-size:.88rem;font-family:inherit;color:var(--text);padding:0;opacity:.6;transition:opacity .15s}.cle-new-item-input:focus{opacity:1}.cle-new-item-input::placeholder{color:var(--muted);opacity:.5}.cle-add-btn{background:transparent;border:1px solid var(--border);border-radius:4px;color:var(--muted);font-size:.8rem;padding:.2rem .45rem;cursor:pointer;flex-shrink:0;transition:color .12s,border-color .12s}.cle-add-btn:hover{color:var(--accent);border-color:var(--accent)}[data-theme=light] .cle-item-row:hover{background:#00000008}[data-theme=light] .cle-add-row{border-top-color:#00000012}@media(max-width:640px){.app-header{flex-wrap:wrap;gap:.5rem}.app-header-center{order:3;width:100%;max-width:100%;margin:0}.note-masonry{columns:2 160px}.ne-overlay{padding:0;align-items:flex-end}.ne-modal{flex-direction:column;max-width:100%;max-height:95vh;border-radius:14px 14px 0 0}.ne-meta-panel{width:100%;border-left:none;border-top:1px solid var(--border);flex-direction:row;flex-wrap:wrap;padding:.75rem 1rem;gap:.5rem}.ne-meta-section{border-bottom:none;padding:.2rem 0;flex-shrink:0}.ne-meta-label{display:none}.ne-timestamps,.ne-close-wrap{margin-top:0}.ne-meta-btn,.ne-close-btn{font-size:.78rem;padding:.3rem .5rem;white-space:nowrap}.ne-color-picker{flex-wrap:nowrap}}@media(max-width:480px){.note-masonry{columns:1}.note-action-btn{min-width:40px;min-height:40px;font-size:1.1rem}.note-card-inner{padding:.9rem 1rem .75rem}.app-new-btn{width:100%;padding:.65rem 1rem;font-size:.95rem}.app-new-bar{padding:.75rem 1rem 0}}.app-offline-banner{position:sticky;top:0;z-index:200;background:#78350f;color:#fef3c7;text-align:center;font-size:.82rem;font-weight:500;padding:.4rem 1rem;border-bottom:1px solid rgba(255,200,80,.3)}.app-sync-banner{position:sticky;top:0;z-index:200;background:#14532d;color:#bbf7d0;text-align:center;font-size:.82rem;font-weight:500;padding:.4rem 1rem;border-bottom:1px solid rgba(60,200,100,.3);animation:slide-down .2s ease}@keyframes slide-down{0%{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}