:root{color-scheme:dark;font-family:ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,sans-serif;line-height:1.5;--bg: #0a0a0a;--surface: #1e1e1e;--border: rgba(255, 255, 255, .12);--text: #e8eaed;--text-dim: rgba(255, 255, 255, .5);--accent: #8ab4f8;--radius: 8px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:var(--bg);color:var(--text)}.header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:1rem;padding:.75rem 1.5rem;background:var(--bg);border-bottom:1px solid var(--border)}.header-left{display:flex;align-items:center;gap:.6rem;flex-shrink:0}.logo{color:var(--accent)}.header h1{font-size:1.25rem;font-weight:600;letter-spacing:-.02em}.search-bar{flex:1;max-width:40rem;margin:0 auto;display:flex;align-items:center;gap:.5rem;padding:.5rem .75rem;background:#ffffff0f;border-radius:var(--radius);border:1px solid transparent;transition:border-color .2s}.search-bar:focus-within{border-color:var(--accent);background:#ffffff1a}.search-bar svg{color:var(--text-dim);flex-shrink:0}.search-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.95rem}.search-input::placeholder{color:var(--text-dim)}.main{max-width:52rem;margin:0 auto;padding:1.5rem}.quick-add{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);margin-bottom:1.5rem;cursor:text;transition:box-shadow .2s}.quick-add:hover{box-shadow:0 2px 8px #0000004d}.quick-add-placeholder{color:var(--text-dim);font-size:.95rem}.quick-add-todo{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.25rem;border-radius:50%;display:flex;transition:background .15s}.quick-add-todo:hover{background:#ffffff14}.section-label{font-size:.7rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--text-dim);margin-bottom:.75rem}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(14rem,1fr));gap:.75rem;margin-bottom:2rem}.note-card{position:relative;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;min-height:5rem;transition:box-shadow .2s;overflow:hidden}.note-card:hover{box-shadow:0 2px 8px #0000004d}.note-card:hover .pin-btn,.note-card:hover .note-actions{opacity:1}.note-title{font-size:.95rem;font-weight:600;margin-bottom:.4rem;padding-right:1.5rem;word-break:break-word}.note-body{font-size:.85rem;color:#ffffffbf;white-space:pre-wrap;word-break:break-word;max-height:12rem;overflow:hidden}.pin-btn{position:absolute;top:.35rem;right:.35rem;background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.3rem;border-radius:50%;opacity:0;transition:opacity .15s,background .15s;display:flex}.pin-btn:hover{background:#ffffff1a}.pin-btn.pinned{opacity:1;color:var(--accent)}.todo-list{margin:.25rem 0}.todo-item{display:flex;align-items:center;gap:.5rem;padding:.15rem 0;font-size:.85rem;cursor:pointer}.todo-item input[type=checkbox]{accent-color:var(--accent);width:15px;height:15px;flex-shrink:0;cursor:pointer}.todo-item span{color:#ffffffbf}.todo-item span.done{text-decoration:line-through;color:var(--text-dim)}.note-actions{display:flex;gap:.25rem;margin-top:.5rem;opacity:0;transition:opacity .15s}.btn-icon{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.35rem;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}.btn-icon:hover{background:#ffffff1a;color:var(--text)}.editor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;display:grid;place-items:start center;padding-top:10vh;z-index:100}.editor{width:100%;max-width:36rem;border:1px solid var(--border);border-radius:var(--radius);padding:1rem;box-shadow:0 8px 32px #00000080}.editor-title{display:block;width:100%;background:none;border:none;outline:none;color:var(--text);font-size:1.1rem;font-weight:600;font-family:inherit;margin-bottom:.5rem}.editor-title::placeholder{color:var(--text-dim)}.editor-body{display:block;width:100%;background:none;border:none;outline:none;color:var(--text);font-size:.9rem;font-family:inherit;resize:vertical;min-height:5rem;line-height:1.6}.editor-body::placeholder{color:var(--text-dim)}.todo-list-editor{margin:.25rem 0}.todo-row-editor{display:flex;align-items:center;gap:.4rem;padding:.15rem 0}.todo-row-editor input[type=checkbox]{accent-color:var(--accent);width:16px;height:16px;flex-shrink:0;cursor:pointer}.todo-input{flex:1;background:none;border:none;outline:none;color:var(--text);font-size:.9rem;font-family:inherit}.todo-input::placeholder{color:var(--text-dim)}.todo-input.done{text-decoration:line-through;color:var(--text-dim)}.btn-add-todo{background:none;border:none;color:var(--text-dim);font-size:.85rem;cursor:pointer;padding:.3rem 0;margin-top:.25rem;transition:color .15s}.btn-add-todo:hover{color:var(--text)}.editor-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.75rem;gap:.5rem}.editor-actions{display:flex;align-items:center;gap:.25rem}.btn-toggle{background:none;border:none;color:var(--text-dim);cursor:pointer;padding:.4rem;border-radius:50%;display:flex;transition:background .15s,color .15s}.btn-toggle:hover{background:#ffffff14;color:var(--text)}.btn-toggle.active{color:var(--accent)}.editor-buttons{display:flex;gap:.5rem}.btn-close,.btn-save{background:none;border:none;color:var(--accent);font-size:.85rem;font-weight:500;cursor:pointer;padding:.4rem .75rem;border-radius:var(--radius);transition:background .15s}.btn-close:hover,.btn-save:hover{background:#ffffff14}.color-picker{display:flex;gap:.25rem;margin-left:.25rem}.color-dot{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:border-color .15s}.color-dot:hover{border-color:#ffffff4d}.color-dot.active{border-color:var(--accent)}.empty{display:flex;flex-direction:column;align-items:center;gap:1rem;padding:4rem 1rem;color:var(--text-dim);font-size:.95rem}@media(max-width:640px){.header{flex-wrap:wrap;gap:.5rem}.search-bar{order:3;flex-basis:100%}.main{padding:1rem}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(10rem,1fr))}.editor-overlay{padding-top:2rem}}