:root{--primary: #4f46e5;--primary-light: #6366f1;--primary-dark: #4338ca;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--danger: #ef4444;--success: #10b981}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;color:var(--gray-800);background-color:var(--gray-50);line-height:1.5}button{font-family:inherit;cursor:pointer}.app{display:flex;flex-direction:column;min-height:100vh}.header{background-color:#fff;border-bottom:1px solid var(--gray-200);padding:1rem;display:flex;align-items:center;justify-content:space-between}.logo{display:flex;align-items:center;gap:.5rem;font-weight:600;font-size:1.25rem;color:var(--primary)}.main{display:flex;flex:1}.sidebar{width:250px;background-color:#fff;border-right:1px solid var(--gray-200);padding:1rem;display:flex;flex-direction:column;gap:1rem}.sidebar-header{display:flex;justify-content:space-between;align-items:center}.sidebar-title{font-size:.875rem;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em}.new-note-btn{background-color:var(--primary);color:#fff;border:none;border-radius:.375rem;padding:.5rem 1rem;font-weight:500;display:flex;align-items:center;gap:.5rem;transition:background-color .2s}.new-note-btn:hover{background-color:var(--primary-dark)}.note-list{flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:.5rem}.note-item{padding:.75rem;border-radius:.375rem;cursor:pointer;transition:background-color .2s}.note-item:hover{background-color:var(--gray-100)}.note-item.active{background-color:var(--gray-100);border-left:3px solid var(--primary)}.note-item-title{font-weight:500;margin-bottom:.25rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-preview{font-size:.875rem;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-date{font-size:.75rem;color:var(--gray-400);margin-top:.25rem}.content{flex:1;padding:1.5rem;display:flex;flex-direction:column;gap:1rem}.note-editor{display:flex;flex-direction:column;gap:1rem;flex:1}.note-title{font-size:1.5rem;font-weight:600;padding:.5rem;border:1px solid transparent;border-radius:.375rem;width:100%;background-color:transparent}.note-title:focus{outline:none;border-color:var(--gray-300);background-color:#fff}.note-body{flex:1;padding:.75rem;border:1px solid var(--gray-300);border-radius:.375rem;resize:none;font-family:inherit;font-size:1rem;line-height:1.5;background-color:#fff}.note-body:focus{outline:none;border-color:var(--primary-light)}.toolbar{display:flex;justify-content:space-between;align-items:center;padding:.5rem 0}.note-info{font-size:.875rem;color:var(--gray-500)}.actions{display:flex;gap:.5rem}.action-btn{background-color:#fff;border:1px solid var(--gray-300);border-radius:.375rem;padding:.5rem;display:flex;align-items:center;justify-content:center;color:var(--gray-700);transition:all .2s}.action-btn:hover{background-color:var(--gray-100);color:var(--gray-900)}.action-btn.danger{color:var(--danger)}.action-btn.danger:hover{background-color:#fee2e2}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;height:100%;color:var(--gray-500);text-align:center;padding:2rem}.empty-state-icon{font-size:3rem;color:var(--gray-300)}.empty-state-title{font-size:1.25rem;font-weight:500;color:var(--gray-700)}.empty-state-text{max-width:400px;margin-bottom:1rem}@media (max-width: 768px){.main{flex-direction:column}.sidebar{width:100%;border-right:none;border-bottom:1px solid var(--gray-200)}.content{padding:1rem}}