.note-taking-app{min-height:100vh;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.app-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;color:#fff}.app-header h1{margin:0;font-size:2rem;font-weight:700}.app-content{display:grid;grid-template-columns:350px 1fr;gap:2rem;height:calc(100vh - 150px)}.sidebar{background:#fff;border-radius:12px;padding:1rem;overflow-y:auto;box-shadow:0 4px 6px rgba(0,0,0,.1)}.note-list{display:flex;flex-direction:column;gap:.75rem}.note-list-empty{display:flex;align-items:center;justify-content:center;height:100%;color:#666;text-align:center;padding:2rem}.note-item{display:flex;gap:.5rem;padding:1rem;border-radius:8px;cursor:pointer;transition:all .2s;background:#f8f9fa;border:2px solid transparent}.note-item:hover{background:#e9ecef;transform:translateX(4px)}.note-item.active{background:#e3f2fd;border-color:#667eea}.note-item-content{flex:1;min-width:0}.note-item h3{font-size:1rem;font-weight:600;color:#333}.note-item h3,.note-item p{margin:0 0 .5rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.note-item p{font-size:.875rem;color:#666}.note-date{font-size:.75rem;color:#999}.btn-delete{background:none;border:none;font-size:1.25rem;cursor:pointer;padding:.25rem;opacity:.6;transition:opacity .2s;flex-shrink:0}.btn-delete:hover{opacity:1}.main-content{background:#fff;border-radius:12px;padding:2rem;box-shadow:0 4px 6px rgba(0,0,0,.1);overflow:hidden;display:flex;flex-direction:column}.empty-state{display:flex;align-items:center;justify-content:center;height:100%;color:#999;font-size:1.125rem}.note-editor{display:flex;flex-direction:column;height:100%}.editor-header{display:flex;gap:1rem;margin-bottom:1.5rem;align-items:center}.title-input{flex:1;font-size:1.5rem;font-weight:600;border:none;border-bottom:2px solid #e9ecef;padding:.5rem 0;outline:none;transition:border-color .2s}.title-input:focus{border-bottom-color:#667eea}.editor-actions{display:flex;gap:.5rem}.content-textarea{flex:1;border:none;outline:none;resize:none;font-size:1rem;line-height:1.6;font-family:inherit;padding:1rem;background:#f8f9fa;border-radius:8px}.btn-primary,.btn-secondary{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:.875rem;font-weight:600;cursor:pointer;transition:all .2s}.btn-primary{background:#667eea;color:#fff}.btn-primary:hover{background:#5568d3;transform:translateY(-2px);box-shadow:0 4px 8px rgba(102,126,234,.3)}.btn-secondary{background:#e9ecef;color:#333}.btn-secondary:hover{background:#dee2e6}@media (max-width:768px){.note-taking-app{padding:1rem}.app-content{grid-template-columns:1fr;height:auto}.sidebar{max-height:300px}.main-content{min-height:500px}.app-header h1{font-size:1.5rem}.editor-header{flex-direction:column;align-items:stretch}.editor-actions{justify-content:flex-end}}.content-textarea::-webkit-scrollbar,.sidebar::-webkit-scrollbar{width:8px}.content-textarea::-webkit-scrollbar-track,.sidebar::-webkit-scrollbar-track{background:#f1f1f1;border-radius:4px}.content-textarea::-webkit-scrollbar-thumb,.sidebar::-webkit-scrollbar-thumb{background:#888;border-radius:4px}.content-textarea::-webkit-scrollbar-thumb:hover,.sidebar::-webkit-scrollbar-thumb:hover{background:#555}