.notes-page{display:flex;height:calc(100vh - 60px);gap:16px;padding:16px}.note-content,.note-list,.note-placeholder,.notebook-list{background:rgba(255,255,255,.75);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-radius:12px;box-shadow:0 4px 10px rgba(0,0,0,.05)}.note-list,.notebook-list{width:220px;padding:16px;overflow-y:auto}.note-list ul,.notebook-list ul{list-style:none;padding:0;margin:0}.note-list li,.notebook-list li{padding:8px;border-radius:8px;cursor:pointer;display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;transition:background .2s ease}.note-list li.drag-over,.notebook-list li.drag-over{opacity:.6}.note-list li.active,.note-list li:hover,.notebook-list li.active,.notebook-list li:hover{background:linear-gradient(90deg,#ffe4ec,#fef6e4);color:#5c4b51}.note-content h2,.note-list h2,.notebook-list h2{display:flex;justify-content:space-between;align-items:center;font-size:16px;font-weight:700;background:linear-gradient(90deg,#facc15,#ec4899);background-color:white;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:12px}.note-list h2 button,.notebook-list h2 button{margin-left:8px;background:linear-gradient(90deg,#ffe4ec,#fef6e4);border:1px solid rgba(255,255,255,.4);border-radius:8px;padding:4px 8px;cursor:pointer;transition:background .2s ease}.note-list h2 button:hover,.notebook-list h2 button:hover{background:linear-gradient(90deg,#f7e6f6,#fff5e4)}.note-list li .actions button,.notebook-list li .actions button{margin-left:4px;background:none;border:none;cursor:pointer}.note-content{flex:1;padding:24px;overflow-y:auto}.note-content h2{margin-top:0}.note-title-input{font-size:16px;font-weight:700;background:linear-gradient(90deg,#facc15,#ec4899);background-color:white;background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}.note-content .note-title-input{width:100%;margin-bottom:16px;border:none;background:transparent}.note-content .note-title-input:focus{outline:none}.note-content .toolbar{display:flex;gap:4px;margin-bottom:8px;position:sticky;top:0;z-index:10;background:rgba(255,255,255,.95);padding:4px;border-radius:6px}.note-content .toolbar button{background:linear-gradient(90deg,#ffe4ec,#fef6e4);border:1px solid rgba(255,255,255,.4);padding:4px 8px;border-radius:6px;cursor:pointer}.note-content .toolbar button:hover{background:linear-gradient(90deg,#f7e6f6,#fff5e4)}.note-content .toolbar input[type=color]{border:none;padding:0;width:32px;height:32px;cursor:pointer}.note-content .toolbar input[type=color]:hover{opacity:.8}.note-content .note-body{min-height:300px;outline:none;padding:8px 12px;font-size:14px;border:1px solid #ccc;border-radius:6px;box-sizing:border-box}.note-content .note-body,.note-content .note-body *{text-align:left;direction:ltr}.note-content .note-body input[type=checkbox]{margin-right:4px;vertical-align:middle}.note-placeholder{flex:1;display:flex;align-items:center;justify-content:center;color:#666;padding:24px}@media (max-width:768px){.notes-page{flex-direction:column;height:auto}.note-content,.note-list,.note-placeholder,.notebook-list{width:100%}.note-list,.notebook-list{max-height:30vh}}