*{box-sizing:border-box;margin:0;padding:0}body{background-color:#fff;min-height:100vh;font-family:sans-serif}.add-notes{background:#fff;border:1px solid #0000001a;border-radius:12px;justify-content:center;gap:8px;width:400px;margin:0 auto 24px;padding:20px;display:flex}.add-notes input{font:inherit;background-color:#0000;border:1.5px solid #306b54;border-radius:8px;flex:1;padding:8px 12px}.add-notes input::placeholder{color:#000}.add-notes button{color:#fff;font:inherit;background:#000;border:none;border-radius:8px;padding:8px 12px}.add-notes button:hover{opacity:.85;cursor:pointer}.all-notes{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:12px;margin:0 auto;list-style:none;display:flex}.all-notes li{border:1px solid #0000001a;border-radius:16px;flex-direction:column;align-items:center;gap:12px;width:350px;padding:12px;display:flex}.note.pinned{border:1px solid #1a1a1a}.note-edit-input{color:#1a1a1a;resize:none;background:0 0;border:none;border-bottom:2px solid #0000004d;outline:none;width:100%;padding:0;font-family:inherit;font-size:20px;overflow:hidden}.note-edit-input:focus{border-bottom-color:#1a1a1a}.all-notes span{color:#1a1a1a;word-break:break-word;align-self:flex-start;width:100%;font-size:20px}.all-notes .note-date{color:#0000008c;align-self:center;font-size:12px}.note-footer{justify-content:space-between;align-items:center;width:100%;display:flex}.all-btn{display:flex}.edit-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:12px;margin-right:4px;padding:6px 10px;font-size:12px}.edit-btn:hover{opacity:.8}.save-btn{color:#fff;cursor:pointer;background:#000;border:1px solid #000;border-radius:6px;margin-right:4px;padding:4px 10px;font-size:12px}.save-btn:hover{opacity:.8}.delete-btn{color:#fff;cursor:pointer;background:red;border:1px solid #ff5000cc;border-radius:6px;margin-right:4px;padding:4px 8px;font-size:12px}.delete-btn:hover{opacity:.85}.pin-btn{color:#fff;cursor:pointer;background:#3b9ab8;border:1px solid #2c7a99;border-radius:6px;margin-right:4px;padding:4px 8px;font-size:12px}.pin-btn:hover{opacity:.85}.pinned-btn{background:#d4a017;border-color:#d4a017}.toast{border-left:3px solid;border-radius:8px;align-items:center;gap:12px;width:350px;padding:12px;font-weight:500;display:flex;position:fixed;bottom:24px;left:50%;transform:translate(-50%)}.toast-success{color:#166534;background-color:#dbfce7;border-color:#16a34a}.toast-error{color:#991b1b;background-color:#fee2e2;border-color:#dc2626}.toast-info{flex-direction:column;display:flex}h1{text-align:center;color:#151314;padding:32px 0 8px;font-size:32px;font-weight:800}