*{margin:0;padding:0;box-sizing:border-box}body{font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,sans-serif;background-color:#fff;color:#1a1a1a;height:100vh;overflow:hidden}#root{height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;height:100vh}.top-bar{display:flex;align-items:stretch;border-bottom:1px solid #e0e0e0;background:#fff;min-height:44px}.top-bar-sidebar{width:240px;min-width:180px;flex-shrink:0;display:flex;align-items:center;padding:6px 12px;border-right:1px solid #e0e0e0}.top-bar-editor{flex:1;display:flex;align-items:center;padding:6px 12px;gap:8px}.new-note-btn{padding:5px 14px;border:1px solid #3b82f6;background:#fff;color:#3b82f6;font-size:13px;cursor:pointer;border-radius:4px;white-space:nowrap}.new-note-btn:hover{background:#eff6ff}.title-field-wrap{flex:1;display:flex;flex-direction:column;gap:2px;align-items:center}.top-bar-actions{display:flex;align-items:center;gap:8px;flex-shrink:0}.note-title-input{width:100%;padding:4px 8px;border:none;border-bottom:1px solid transparent;outline:none;font-size:15px;color:#1a1a1a;background:transparent;transition:border-color .15s}.note-title-input:focus{border-bottom-color:#3b82f6}.note-title-input.input-error{border-bottom-color:#ef4444}.note-title-input::placeholder{color:#aaa}.note-title-input:disabled{color:#bbb;cursor:default}.title-error-msg{font-size:11px;color:#ef4444;padding-left:8px}.save-btn{width:34px;height:34px;border:none;background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:4px;border-radius:4px}.save-btn:hover:not(:disabled){background:#f0f0f0}.save-btn:disabled{opacity:.35;cursor:default}.save-status{display:flex;align-items:center;gap:4px;font-size:11px;color:#888;min-width:60px;justify-content:flex-end}.save-status.saved{color:#22c55e}.save-status.saving{color:#f59e0b}.spinner{width:13px;height:13px;border:2px solid transparent;border-top-color:currentColor;border-radius:50%;animation:spin .6s linear infinite;flex-shrink:0}@keyframes spin{to{transform:rotate(360deg)}}.error-banner{display:flex;align-items:center;justify-content:space-between;padding:8px 16px;background:#fef2f2;border-bottom:1px solid #fecaca;color:#b91c1c;font-size:13px}.error-dismiss{background:none;border:none;cursor:pointer;color:#b91c1c;font-size:14px;padding:0 4px;line-height:1}.error-dismiss:hover{opacity:.7}.main-content{display:flex;flex:1;overflow:hidden}.sidebar{width:240px;min-width:180px;border-right:1px solid #e0e0e0;display:flex;flex-direction:column;background:#fff}.sidebar-header{padding:8px 12px;font-size:12px;color:#666;border-bottom:1px solid #f0f0f0;font-weight:500;letter-spacing:.02em}.note-list{list-style:none;overflow-y:auto;flex:1;padding:0;margin:0}.empty-hint{padding:14px 12px;font-size:13px;color:#999}.note-item{padding:8px 12px;cursor:pointer;border-bottom:1px solid #f5f5f5}.note-item:hover{background:#f9f9f9}.note-item.active{background:#eff6ff}.note-item-row{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:2px}.note-item-title{color:#3b82f6;font-size:14px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:1}.delete-btn{background:none;border:none;cursor:pointer;color:#bbb;display:flex;align-items:center;padding:2px;border-radius:3px;flex-shrink:0;opacity:0;transition:opacity .15s,color .15s}.note-item:hover .delete-btn,.note-item.active .delete-btn{opacity:1}.delete-btn:hover{color:#ef4444;background:#fff0f0}.note-item-preview{color:#888;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-item-date{color:#bbb;font-size:10px;margin-top:2px}.editor-area{flex:1;display:flex;flex-direction:column;background:#fff;overflow:hidden}.note-content-textarea{flex:1;width:100%;padding:20px 28px;border:none;outline:none;resize:none;font-size:15px;line-height:1.7;color:#1a1a1a;background:#fff;font-family:inherit}.note-content-textarea::placeholder{color:#ccc}.no-note-selected{flex:1;display:flex;align-items:center;justify-content:center;color:#bbb;font-size:15px}