*{box-sizing:border-box;margin:0;padding:0}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;line-height:1.5;color:#213547;background-color:#f8fafc;min-height:100vh}.app{min-height:100vh;background-color:#f8fafc;color:#334155;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.navbar{background-color:#fff;box-shadow:0 1px 3px #0000001a;border-bottom:1px solid #e2e8f0;position:sticky;top:0;z-index:10}.navbar-container{max-width:1280px;margin:0 auto;padding:0 1rem}.navbar-content{height:4rem;display:flex;align-items:center;justify-content:space-between}.navbar-brand{display:flex;align-items:center;gap:.5rem;color:#3b82f6}.navbar-brand svg{width:1.5rem;height:1.5rem}.navbar-title{font-size:1.25rem;font-weight:700;letter-spacing:-.025em}.search-container{position:relative}.search-container.hidden-mobile{display:none}@media(min-width:640px){.search-container.hidden-mobile{display:block}}.search-input{padding:.375rem 1rem .375rem 2rem;background-color:#f1f5f9;border:none;border-radius:9999px;font-size:.875rem;width:16rem;transition:all .2s;outline:none}.search-input:focus{outline:2px solid #3b82f6;outline-offset:2px}.search-icon{position:absolute;left:.75rem;top:50%;transform:translateY(-50%);width:1rem;height:1rem;color:#94a3b8}.main-content{max-width:1280px;margin:0 auto;padding:0 1rem}@media(min-width:640px){.main-content{padding:0 1.5rem}}@media(min-width:1024px){.main-content{padding:0 2rem}}.main-padding{padding-top:2rem;padding-bottom:2rem}.mobile-search{display:block;margin-bottom:1.5rem}@media(min-width:640px){.mobile-search{display:none}}.mobile-search-container{position:relative}.grid-container{display:grid;grid-template-columns:1fr;gap:2rem}@media(min-width:1024px){.grid-container{grid-template-columns:1fr 2fr}}.editor-section{position:relative}@media(min-width:1024px){.editor-section{position:sticky;top:6rem;height:fit-content}}.editor-card{background-color:#fff;border-radius:.75rem;box-shadow:0 1px 3px #0000001a;border:1px solid #e2e8f0;overflow:hidden}.editor-header{padding:1rem;border-bottom:1px solid #f1f5f9;background-color:#f8fafc;display:flex;justify-content:space-between;align-items:center}.editor-title{font-weight:600;color:#475569;display:flex;align-items:center;gap:.5rem}.cancel-btn{font-size:.75rem;color:#64748b;background:none;border:none;cursor:pointer}.cancel-btn:hover{color:#334155}.form-container{padding:1rem;display:flex;flex-direction:column;gap:1rem}.form-group{display:flex;flex-direction:column;gap:.25rem}.form-input,.form-textarea{padding:.75rem;border:1px solid #e2e8f0;border-radius:.5rem;outline:none;transition:all .2s;font-weight:500}.form-input:focus,.form-textarea:focus{outline:2px solid rgba(59,130,246,.5);border-color:#3b82f6}.form-textarea{resize:none;font-size:.875rem;line-height:1.5;font-weight:400}.submit-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:.5rem;padding:.625rem;border-radius:.5rem;color:#fff;font-weight:500;transition:all .2s;border:none;cursor:pointer}.submit-btn:disabled{background-color:#e2e8f0;cursor:not-allowed}.submit-btn:not(:disabled){background-color:#3b82f6;box-shadow:0 4px 6px -1px #0000001a}.submit-btn:not(:disabled):hover{background-color:#2563eb;box-shadow:0 10px 15px -3px #0000001a}.notes-section{display:flex;flex-direction:column;gap:1rem}.notes-header{display:flex;align-items:center;justify-content:space-between}.notes-title{font-size:1.125rem;font-weight:700;color:#334155}.notes-count{font-size:.875rem;color:#64748b;background-color:#fff;padding:.25rem .75rem;border-radius:9999px;border:1px solid #e2e8f0;box-shadow:0 1px 2px #0000000d}.loading-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 0;color:#64748b}.loading-spinner{width:2.5rem;height:2.5rem;animation:spin 1s linear infinite;color:#3b82f6;margin-bottom:.75rem}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.error-container{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:5rem 0;color:#dc2626;background-color:#fef2f2;border-radius:.75rem;border:1px solid #fecaca}.error-icon{width:2.5rem;height:2.5rem;margin-bottom:.75rem}.error-message{font-weight:500;color:#dc2626;margin-bottom:1rem}.retry-btn{padding:.5rem 1rem;background-color:#fff;border:1px solid #fca5a5;color:#dc2626;border-radius:.5rem;font-size:.875rem;cursor:pointer}.retry-btn:hover{background-color:#fef2f2}.empty-container{text-align:center;padding:5rem 0;background-color:#fff;border-radius:.75rem;border:1px dashed #cbd5e1}.empty-icon-container{width:4rem;height:4rem;background-color:#eff6ff;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1rem}.empty-icon{width:2rem;height:2rem;color:#bfdbfe}.empty-title{color:#334155;font-weight:500;margin-bottom:.25rem}.empty-text{color:#64748b;font-size:.875rem;max-width:20rem;margin:0 auto}.notes-grid{display:grid;grid-template-columns:1fr;gap:1rem}@media(min-width:640px){.notes-grid{grid-template-columns:repeat(2,1fr)}}.note-card{background-color:#fff;border-radius:.75rem;padding:1.25rem;border:1px solid #e2e8f0;transition:all .2s;position:relative}.note-card:hover{box-shadow:0 4px 6px -1px #0000001a}.note-card.editing{border-color:#3b82f6;box-shadow:0 0 0 1px #3b82f6}.note-card:hover:not(.editing){border-color:#bfdbfe}.note-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:.5rem}.note-title{font-weight:700;color:#334155;line-height:1.2;padding-right:1rem;overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}.note-actions{display:flex;align-items:center;gap:.25rem;opacity:0;transition:opacity .2s}.note-card:hover .note-actions{opacity:1}.action-btn{padding:.375rem;border:none;background:none;border-radius:.375rem;cursor:pointer;transition:all .2s}.edit-btn{color:#64748b}.edit-btn:hover{color:#3b82f6;background-color:#eff6ff}.delete-btn{color:#64748b}.delete-btn:hover{color:#dc2626;background-color:#fef2f2}.action-btn svg{width:1rem;height:1rem}.note-content{color:#475569;font-size:.875rem;line-height:1.5;overflow:hidden;display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;white-space:pre-wrap}.note-content:empty:before{content:"No content...";font-style:italic;color:#94a3b8}.note-footer{margin-top:1rem;padding-top:.75rem;border-top:1px solid #f1f5f9;display:flex;justify-content:space-between;align-items:center;font-size:.75rem;color:#94a3b8}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}