:root{font-family:Inter,system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#024;background-color:#ececec;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}body{margin:0;display:flex;justify-content:center;place-items:center;min-width:320px;min-height:100vh;padding-top:80px}button{border-radius:8px;font-size:1em;font-weight:500;font-family:inherit}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}.noteList-flex{display:flex;flex-direction:row;justify-content:center;gap:20px;padding:20px;flex-wrap:wrap;width:100%}.noteItem{flex:1 1 180px;max-width:350px;box-sizing:border-box;padding:20px;border-radius:10px;color:#fff;font-family:Arial,sans-serif;box-shadow:0 4px 6px #0000001a;word-wrap:break-word;white-space:normal}.noteItem button{margin:5px;padding:10px;border:none;cursor:pointer;background-color:#0000001a;color:#fff;font-weight:700;width:70px}.noteItem button:hover{background-color:#0003}.noteForm{background-color:transparent;padding:20px;border-radius:10px;border:2px double #C19A6B;box-shadow:0 4px 6px #0000001a;margin:120px auto 50px;width:300px;font-family:Arial,sans-serif}.noteForm label{display:block;margin-bottom:8px;font-weight:700;color:#333}.noteForm input,.noteForm textarea,.noteForm select{background-color:wheat;color:#4b3b2e;width:90%;padding:10px;margin-bottom:15px;border:1px solid #C19A6B;border-radius:5px;font-size:14px;font-family:inherit}input::placeholder,textarea::placeholder{color:#a0806c}.noteForm button{padding:10px 20px;border:none;border-radius:5px;background-color:#8b4513;color:#fff;font-size:14px;font-weight:700;cursor:pointer;display:block;width:100%}.noteForm button:hover{background-color:sienna;color:beige}.noteForm input:focus,.noteForm textarea:focus,.note-form select:focus{background-color:#f7f7f7;outline:none;border-color:#333;box-shadow:0 0 5px #3e1f03}.noteForm input,.noteForm textarea,.noteForm select,.noteForm button{transition:all .3s ease}.error{color:#a00;font-size:.875rem;margin-top:5px}.searchBar,.category{display:flex;align-items:center;justify-content:center;gap:10px;margin:20px auto;max-width:auto;border:1px solid #C19A6B;border-radius:5px;padding:5px 10px}.searchBar input{outline:none;flex:1;padding:8px;font-size:14px;border-radius:5px;background-color:wheat;color:#4b3b2e}.searchBar img{width:20px;height:20px;margin-right:10px}.category select{background-color:wheat;border:1px solid #8B5A2B;color:#4b3b2e;outline:none;flex:1;padding:8px;font-size:14px;border-radius:5px}.category select:hover{border-color:#c19a6b}@media(max-width:400px){.noteForm{width:95%;padding:15px}}@media(min-width:401px)and (max-width:600px){.noteForm{width:90%;padding:20px}}@media(max-width:600px){.noteList-flex{flex-direction:column;gap:10px;padding:10px}.noteItem{flex:1 1 100%;padding:15px;font-size:14px}.searchBar,.category{flex-direction:column;gap:5px;padding:5px}.searchBar input,.category select{font-size:12px;padding:6px}}@media(min-width:601px)and (max-width:1024px){.noteList-flex{gap:15px;padding:15px}}@media(min-width:601px)and (max-width:1024px){.noteItem{padding:18px;font-size:16px}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;z-index:999}.editForm{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background-color:#fff;box-shadow:0 4px 8px #0003;border-radius:10px;width:90%;max-width:400px;padding:20px;z-index:1000}.editForm h3{margin-bottom:20px;font-size:1.5rem;text-align:center}.editForm form{display:flex;flex-direction:column;gap:15px}.editForm input,.editForm textarea,.editForm select{padding:10px;border:1px solid #ccc;border-radius:5px;font-size:14px;width:100%;box-sizing:border-box}.editForm button{width:20%;padding:10px 15px;background-color:#33b5e5;color:#fff;border:none;font-size:16px;cursor:pointer;margin:20px}.editForm button:hover{background-color:#007bb5}@media(max-width:600px){.editForm{width:85%;padding:15px}.editForm button{width:90%;font-size:14px}}@media(min-width:601px)and (max-width:1024px){.editForm{width:70%}}.overlay{position:fixed;top:0;left:0;width:100%;height:100%;background-color:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.confirm-delete{background-color:#fff;padding:20px;border-radius:10px;box-shadow:0 4px 8px #0003;text-align:center;max-width:300px;width:90%}.confirm-buttons{display:flex;justify-content:space-around;margin-top:20px}.yes-btn{background-color:#1cac78;color:#fff;border:none;border-radius:5px;padding:10px 20px;cursor:pointer;width:70px}.no-btn{background-color:#f44336;color:#fff;border:none;border-radius:5px;padding:10px 20px;cursor:pointer;width:70px}.yes-btn:hover{background-color:#018749}.no-btn:hover{background-color:#d32f2f}@media(max-width:600px){.confirm-delete{width:80%;padding:15px}}@media(min-width:601px)and (max-width:1024px){.confirm-delete{width:60%;padding:20px}}#root{max-width:1280px;margin:0 auto;padding:2rem;text-align:center}.searchBarCat{display:flex;flex-direction:row;justify-content:center}.list-title{font-size:20px;font-weight:500}.app-header{display:flex;justify-content:space-between;align-items:center;position:absolute;top:0;left:0;right:0;padding:10px 20px;font-size:2.5rem;font-weight:700;background-color:transparent;box-shadow:3px 3px 5px #0003;z-index:100}.app-header h1{font-family:Caveat;margin:0;color:#333}.app-footer{display:flex;align-items:center;position:fixed;bottom:0;left:0;right:0;padding:10px 20px;font-size:2.5rem;font-weight:700;background-color:#ececec;box-shadow:3px 3px 10px #0003;z-index:100}.footer-rights{text-align:center;margin-top:20px;font-size:.8rem;color:#333}@media(max-width:400px){.searchBarCat{flex-direction:column;gap:8px;padding:5px}.list-title{font-size:14px;text-align:center;font-weight:400}.app-header{flex-direction:column;align-items:center;padding:10px;font-size:1.8rem}.app-header h1{font-size:1.6rem}@media(max-width:600px){.app-footer{flex-direction:column;align-items:center}}}@media(max-width:600px){.searchBarCat{flex-direction:column;gap:10px;padding:10px}.list-title{font-size:16px;text-align:center}.app-header{flex-direction:column;align-items:center;padding:15px;font-size:2rem}.app-header h1{font-size:1.8rem;color:#444}}@media(min-width:601px)and (max-width:1024px){.list-title{font-size:18px}.app-header{padding:15px 30px;font-size:2.3rem}.app-header h1{font-size:2.2rem}}