*,*:before,*:after{box-sizing:border-box}body{display:flex;flex-direction:column;background-color:#f5f5f5;font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;color:#333;margin:0;padding:0}html,body{height:100%;margin:0}.content{flex:1;display:flex;flex-direction:column}.app{min-height:100vh;display:flex;flex-direction:column}.app-header{width:100%;padding:16px 32px;background:#ffffff;box-shadow:0 1px 4px #0000000f;display:flex;align-items:center;justify-content:center;position:sticky;top:0;z-index:100}.logo{font-size:1.6rem;font-weight:600;letter-spacing:-.5px;color:#333;margin:0}.logo .bolt{color:#4b9da9;display:inline-flex;margin:0 2px}.bolt-icon{color:#4b9da9;display:inline-flex;align-items:center;margin:0 4px}.bolt-icon svg{display:block}form{position:relative;width:480px;margin:30px auto 20px;background:#ffffff;padding:15px;border-radius:8px;box-shadow:0 2px 8px #0000001a}form input,form textarea{width:100%;box-sizing:border-box;border:0;padding:8px;margin-bottom:10px;font-family:inherit;font-size:1rem;line-height:1.4;outline:none;border-radius:4px;resize:none}input::placeholder,textarea::placeholder{font-family:inherit;color:#999}form input:focus,form textarea:focus{outline:none;box-shadow:0 0 0 2px #4b9da933}form button{position:absolute;right:-16px;bottom:-16px;background:#4b9da9;color:#fff;border-radius:50%;width:40px;height:40px;box-shadow:0 2px 4px #00000026;cursor:pointer;outline:none;font-size:1.4rem;line-height:1;text-align:center;border:none}form button:focus,.note button:focus{outline:none;box-shadow:0 0 0 3px #4b9da959}form button:hover{background:#367c87;transform:scale(1.1)}.empty-state{text-align:center;padding:80px 20px;color:#999}.empty-state p{font-size:1.2rem;margin:0}.edit-state{height:100%;min-height:inherit;display:flex;flex-direction:column}.edit-state input,.edit-state textarea{width:100%;border:0;padding:8px;margin-bottom:10px;font-family:inherit;font-size:1rem;line-height:1.4;outline:none;border-radius:4px;resize:none}.edit-title{font-size:1.5em;font-weight:600;margin:10px 0;border:none;outline:none;font-family:inherit;flex-shrink:0}.edit-content{font-size:1.1em;line-height:1.5;min-height:0;border:none;outline:none;font-family:inherit;white-space:pre-wrap;resize:none;overflow-y:auto;flex:1}.edit-state input:focus,.edit-state textarea:focus{box-shadow:0 0 0 2px #4b9da933}.edit-actions{position:absolute;right:0;bottom:0}.note .save-btn{right:-18px;bottom:-18px;background-color:#2ecc71}.note .cancel-btn{right:25px;bottom:-18px;background-color:#95a5a6}.note{position:relative;background-color:#fff;box-shadow:0 4px 10px #ccc;border-radius:10px;padding:10px 10px 28px;width:100%;margin:0;color:#333;overflow:visible;animation:noteFadeIn .25s ease-out;will-change:transform;display:flex;flex-direction:column}.note-body{flex:1;display:flex;flex-direction:column;min-height:0;overflow-y:auto;padding-bottom:12px}.note h1{font-size:1.5em;margin-top:10px}.note p{font-size:1.1em;margin-bottom:10px;white-space:pre-wrap;word-wrap:break-word}.note button{position:absolute;right:-18px;bottom:-18px;background-color:#4b9da9;color:#fff;border:none;width:35px;height:35px;border-radius:50%;cursor:pointer;outline:none;transition:transform .2s ease,background-color .2s ease;z-index:10}.note button:hover{color:#f6f3c2;transform:scale(1.1);background-color:#367c87}.note button:active{transform:scale(.95)}.note .delete-btn{right:-18px;bottom:-18px}.note .edit-btn{right:25px;bottom:-18px}.notes-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:50px;padding:50px;align-items:start}footer{margin-top:auto;text-align:center;padding:15px 0;color:#777;font-size:.9rem}.footer-content{display:inline-flex;align-items:center;gap:6px}@keyframes noteFadeIn{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.loading-state{text-align:center;padding:2rem;color:#666}.error-banner{background-color:#fee;border:1px solid #fcc;border-radius:4px;padding:1rem;margin:1rem 0;color:#c33;text-align:center}.error-dismiss{margin-left:1rem;padding:.25rem .5rem;background:white;border:1px solid #c33;border-radius:4px;cursor:pointer;color:#c33;font-family:inherit}.error-dismiss:hover{background-color:#fee}.edit-error{color:#c33;font-size:.85rem;margin:0 0 8px}