#app{display:flex;width:100vw;height:100vh}*{margin:0;padding:0;box-sizing:border-box;font-family:Microsoft Yahei,sans-serif}body{background-color:#f5f5f5;min-height:100vh;display:flex;flex-direction:column}.sidebar{width:260px;flex-shrink:0}.sidebar-header{padding:16px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.sidebar-header h1{font-size:18px;color:#333}.new-note-btn{width:32px;height:32px;border-radius:50%;background-color:#409eff;color:#fff;border:none;cursor:pointer}.new-note-btn:hover{background-color:#66b1ff}.notes-list{flex:1;overflow-y:auto;padding:8px}.note-item{padding:12px;border-radius:4px;margin-bottom:8px;cursor:pointer;border-left:3px solid transparent}.note-item:hover{background-color:#f0f9ff}.note-item.active{background-color:#e6f7ff;border-left-color:#409eff}.note-title{font-size:14px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-time{font-size:12px;color:#999;margin-top:4px}.empty-tip{text-align:center;padding:32px 0;color:#999}.editor{flex:1;padding:16px}.editor-card{background:#fff;border-radius:8px;box-shadow:0 2px 8px rgba(0,0,0,.1);height:100%;display:flex;flex-direction:column}.title-input{padding:16px 20px;border:none;outline:none;font-size:20px;border-bottom:1px solid #eee}.content-textarea{flex:1;padding:20px;border:none;outline:none;resize:none;font-size:14px;line-height:1.6}.btn-group{padding:16px 20px;border-top:1px solid #eee;display:flex;justify-content:flex-end;gap:12px}.btn{padding:8px 16px;border-radius:4px;border:none;cursor:pointer}.delete-btn{background-color:#f56c6c;color:#fff}.save-btn{background-color:#67c23a;color:#fff}