:root{color-scheme:light;font-family:Nunito,ui-sans-serif,system-ui,sans-serif;line-height:1.5;--sky-start: #e0f0ff;--sky-mid: #c7e2f9;--sky-end: #f0f4ff;--cloud-white: #ffffff;--cloud-shadow: rgba(120, 160, 200, .18);--text-primary: #2c3e50;--text-secondary: #6b8299;--text-muted: #9bb0c4;--accent: #5ba4e6;--accent-light: #8ec5f0;--sidebar-bg: rgba(255, 255, 255, .72);--sidebar-border: rgba(160, 195, 230, .35);--note-yellow: #fff8dc;--note-pink: #ffe4ec;--note-blue: #e0f0ff;--note-green: #e0ffe8;--note-purple: #f0e0ff;--note-orange: #fff0e0;--note-white: #ffffff}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{min-height:100vh;background:linear-gradient(180deg,var(--sky-start) 0%,var(--sky-mid) 40%,var(--sky-end) 100%);color:var(--text-primary)}body:before,body:after{content:"";position:fixed;border-radius:50%;background:#ffffff59;filter:blur(60px);z-index:0;pointer-events:none}body:before{width:500px;height:200px;top:-40px;left:10%;animation:floatCloud 25s ease-in-out infinite}body:after{width:400px;height:160px;top:60px;right:5%;animation:floatCloud 30s ease-in-out infinite reverse}@keyframes floatCloud{0%,to{transform:translate(0) translateY(0)}50%{transform:translate(40px) translateY(-15px)}}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.app{display:flex;height:100vh;position:relative;z-index:1}.sidebar{width:260px;min-width:260px;background:var(--sidebar-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;padding:1.5rem 0;animation:slideIn .4s ease;overflow-y:auto}.sidebar-logo{display:flex;align-items:center;gap:.6rem;padding:0 1.25rem 1.25rem;border-bottom:1px solid var(--sidebar-border);margin-bottom:1rem}.sidebar-logo svg{width:32px;height:32px;filter:drop-shadow(0 2px 4px rgba(91,164,230,.3))}.sidebar-logo h1{font-size:1.35rem;font-weight:800;background:linear-gradient(135deg,var(--accent),#7bb8f0);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:-.02em}.sidebar-section-title{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);padding:.75rem 1.25rem .4rem}.folder-list{list-style:none;display:flex;flex-direction:column;gap:2px;padding:0 .5rem}.folder-item{display:flex;align-items:center;gap:.6rem;padding:.55rem .75rem;border-radius:.6rem;cursor:pointer;font-size:.88rem;font-weight:600;color:var(--text-secondary);transition:all .2s;position:relative}.folder-item:hover{background:#5ba4e61a;color:var(--text-primary)}.folder-item.active{background:#5ba4e62e;color:var(--accent)}.folder-item .folder-icon{font-size:1.1rem;width:20px;text-align:center}.folder-item .note-count{margin-left:auto;font-size:.72rem;font-weight:700;background:#5ba4e626;color:var(--accent);padding:.1rem .45rem;border-radius:.8rem;min-width:22px;text-align:center}.folder-item .delete-folder-btn{display:none;background:none;border:none;color:var(--text-muted);cursor:pointer;font-size:.85rem;padding:.1rem;border-radius:.3rem;line-height:1}.folder-item:hover .delete-folder-btn{display:block}.folder-item .delete-folder-btn:hover{color:#e74c3c;background:#e74c3c1a}.add-folder-row{display:flex;gap:.4rem;padding:.5rem .5rem 0}.add-folder-row input{flex:1;padding:.4rem .6rem;border:1px solid var(--sidebar-border);border-radius:.5rem;background:#fff9;font-family:inherit;font-size:.82rem;color:var(--text-primary);outline:none;transition:border-color .2s}.add-folder-row input:focus{border-color:var(--accent)}.add-folder-row button{padding:.4rem .65rem;border:none;border-radius:.5rem;background:var(--accent);color:#fff;font-weight:700;font-size:.82rem;cursor:pointer;transition:background .2s}.add-folder-row button:hover{background:#4a93d5}.main{flex:1;display:flex;flex-direction:column;overflow:hidden}.toolbar{display:flex;align-items:center;gap:.75rem;padding:1rem 1.75rem;background:#ffffff80;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-bottom:1px solid rgba(160,195,230,.2)}.toolbar h2{font-size:1.15rem;font-weight:700;color:var(--text-primary);flex:1}.search-box{position:relative}.search-box input{padding:.5rem .75rem .5rem 2.2rem;border:1px solid rgba(160,195,230,.35);border-radius:.75rem;background:#ffffffb3;font-family:inherit;font-size:.85rem;color:var(--text-primary);outline:none;width:220px;transition:all .2s}.search-box input:focus{border-color:var(--accent);width:280px;box-shadow:0 0 0 3px #5ba4e626}.search-box svg{position:absolute;left:.7rem;top:50%;transform:translateY(-50%);color:var(--text-muted)}.btn-new{display:flex;align-items:center;gap:.4rem;padding:.55rem 1rem;border:none;border-radius:.75rem;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #5ba4e659;transition:all .2s}.btn-new:hover{transform:translateY(-1px);box-shadow:0 4px 14px #5ba4e673}.notes-area{flex:1;overflow-y:auto;padding:1.5rem 1.75rem}.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:1rem;animation:fadeIn .3s ease}.note-card{background:var(--note-white);border-radius:1rem;padding:1.1rem 1.2rem;cursor:pointer;box-shadow:0 2px 10px var(--cloud-shadow);transition:all .25s;position:relative;display:flex;flex-direction:column;min-height:160px;border:1px solid rgba(160,195,230,.2)}.note-card:hover{transform:translateY(-3px);box-shadow:0 8px 25px #78a0c840}.note-card-color-bar{position:absolute;top:0;left:0;right:0;height:4px;border-radius:1rem 1rem 0 0}.note-card-title{font-size:.95rem;font-weight:700;color:var(--text-primary);margin-bottom:.4rem;margin-top:.3rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.note-card-preview{font-size:.82rem;color:var(--text-secondary);line-height:1.5;flex:1;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical}.note-card-footer{display:flex;align-items:center;justify-content:space-between;margin-top:.6rem;padding-top:.5rem;border-top:1px solid rgba(160,195,230,.15)}.note-card-date{font-size:.7rem;color:var(--text-muted);font-weight:600}.note-card-delete{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.2rem;border-radius:.3rem;opacity:0;transition:all .2s;line-height:1;font-size:.85rem}.note-card:hover .note-card-delete{opacity:1}.note-card-delete:hover{color:#e74c3c;background:#e74c3c1a}.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;text-align:center;animation:fadeIn .4s ease}.empty-state svg{width:100px;height:100px;color:var(--accent-light);margin-bottom:1.2rem;opacity:.6}.empty-state h3{font-size:1.2rem;font-weight:700;color:var(--text-secondary);margin-bottom:.4rem}.empty-state p{font-size:.9rem;color:var(--text-muted)}.editor-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#648cb440;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:100;display:flex;align-items:center;justify-content:center;animation:fadeIn .2s ease}.editor-panel{width:90%;max-width:640px;max-height:85vh;background:var(--cloud-white);border-radius:1.2rem;box-shadow:0 12px 50px #648cb44d;display:flex;flex-direction:column;overflow:hidden;animation:fadeIn .3s ease}.editor-header{display:flex;align-items:center;gap:.5rem;padding:1rem 1.25rem;border-bottom:1px solid rgba(160,195,230,.2)}.editor-header input{flex:1;border:none;font-family:inherit;font-size:1.15rem;font-weight:700;color:var(--text-primary);outline:none;background:transparent}.editor-header input::placeholder{color:var(--text-muted)}.color-picker{display:flex;gap:.35rem}.color-swatch{width:20px;height:20px;border-radius:50%;border:2px solid transparent;cursor:pointer;transition:all .2s}.color-swatch:hover{transform:scale(1.2)}.color-swatch.active{border-color:var(--accent);box-shadow:0 0 0 2px #5ba4e64d}.editor-close{background:none;border:none;color:var(--text-muted);cursor:pointer;padding:.3rem;border-radius:.4rem;font-size:1.1rem;line-height:1;transition:all .2s}.editor-close:hover{background:#a0c3e633;color:var(--text-primary)}.editor-body{flex:1;padding:0 1.25rem 1.25rem;display:flex;flex-direction:column;gap:.75rem;overflow-y:auto}.editor-body textarea{flex:1;min-height:280px;border:none;resize:none;font-family:inherit;font-size:.92rem;line-height:1.7;color:var(--text-primary);outline:none;background:transparent}.editor-body textarea::placeholder{color:var(--text-muted)}.editor-footer{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1.25rem;border-top:1px solid rgba(160,195,230,.2);background:#f0f8ff80}.editor-footer .folder-select{padding:.35rem .6rem;border:1px solid rgba(160,195,230,.35);border-radius:.5rem;font-family:inherit;font-size:.8rem;background:#fff;color:var(--text-primary);outline:none;cursor:pointer}.editor-footer .btn-save{padding:.5rem 1.2rem;border:none;border-radius:.6rem;background:linear-gradient(135deg,var(--accent),var(--accent-light));color:#fff;font-family:inherit;font-size:.85rem;font-weight:700;cursor:pointer;box-shadow:0 2px 8px #5ba4e64d;transition:all .2s}.editor-footer .btn-save:hover{box-shadow:0 4px 14px #5ba4e673}@media(max-width:700px){.sidebar{width:220px;min-width:220px}.search-box input{width:140px}.search-box input:focus{width:180px}.notes-grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr))}}@media(max-width:520px){.sidebar{display:none}}